Text link is hovered, scales an image up

[alexscreenprint]

Hey there CSS Tricksters,

Website URL: cart.screenprintsupply.com/wp

My job has a wordpress eCommerce website using a theme. My issue is with the hover state of the blog feed thumbnails/post title which can be seen at the bottom of the homepage under “Recent Posts”.

THE PROBLEM: There is a text link for the title, and an image with a link around it for the image (not a background image though). Currently when you hover over the image area it scales up like I want it to, but when you hover over the text link (post title) the scale effect does not happen. I need some JS which will scale the image up when the text link is hovered.

Thank you for any help you can provide.

[shaneisme]

It’s part of .link-image:hover, which is the anchor surrounding the image, using transforms. The <h2> tag that’s the title isn’t a child to that element so it won’t do anything.

What I would do is totally re-write that box keeping the <a> as the parent for both the <h2> and the <img>. Then instead of making the transform happen on everything, call only the <img> to transform.

[alexscreenprint]

Hey Shaneisme,

Unfortunately for me that area is dynamically generated through PHP since this is WordPress website using a theme, so I can’t rewrite that one section. But yes typically if it was just straight HTML/CSS I would have made the entire area a link. Any other thoughts? other than hiring a PHP developer to hack this theme up…

Thanks!
Alex

[shaneisme]

If that’s the case, that might be the only way to fix this from where I’m sitting.

[alexscreenprint]

Yeah I was thinking that was going to be the case. Thanks for the help!

[Author]

Posts