Using CSS to change image while hovering over text

[calebweeks]

Hello CSS-Tricks,

I fear that I am asking a question similar to the [Solved] How to make hovering over one div to trigger changes in another div?, but I didn’t quite get the solution in my situation.

I am working in WordPress and building an art gallery website.

My particular question of “Hovering over text and changing the image” comes into play when building the “Artists” Page: hover over their names and the image changes. An example of the idea for reference is the Peter Robertson Gallery. Our particular page is here (with no image changing at the moment): leiperscreekgallery.com/artists

A few key differences is that our design/theme is responsive and we are putting the “rotating” image area in the middle between two columns of artists (text) evenly divided on either side. It’s a 3 column layout: 1) text column/list on left side, 2) image in the middle, 3) text column list on right side.

Do you think you guys can help? I’d be grateful for anything, even pointing me in the direction of the tutorial that may already exist. My strongest knowledge is CSS and HTML. Javascript is a no-go (at this moment) as is jquery. I’ve searched and searched but am not sure I’ve found.

I kind of wish there was a plugin that instead of using “thumbnails” to change the image, it could be text and the text could be styled on either side of the image. I’ve also attempted it with “tooltip” plugins like “Tipsy” but I need the text to be a link while showing an image on hover. I imagine CSS can make it happen.

I took a look at CodePen and want to offer it that way but I might just send the link in this case as I’m in the WordPress editor primarily: leiperscreekgallery.com/artists.

Thanks for any help and assistance – I am in need of it! Thanks guys for whatever you can offer.

[Alen]

The page you referenced uses inline JavaScript. And **it’s quite messy**. I’m pretty sure there are better alternatives. One would be to use data attribute on the artist name, then parse that data with JavaScript (jQuery) and just load the designated image in the appropriate place. If your site is responsive, create a placeholder div that behaves the way you want it and just use max-width on the images inside.

[DamonA]

Hey Caleb,

how did you solve this in the end?

Am trying to do this myself and have spent hours getting nowhere…

Ta

D

[Paulie_D]

@Damona

This is a very old thread and the original poster may not be around.

You would be better served by creating a new thread, demoing a reduced case of your code in Codepen.io and detailing your specific issue.

In general though, these type of situations require Javascript…but until we seethe code, we can’t help you specifically.

[Author]

Posts