Image Swap On Hover

Hello everyone,

I was hoping to get a little help here…

I’m looking to have an image swap when you hover on text. Currently, I have 7 text links (each is a separate text link) that sit above an image. I would like to have the image remain in the same exact location and fade in and out to reveal the image that is currently being hovered on.

… I hope this makes sense?

The desired effect is something similar to this

If anyone could be able to assist me with this, I would greatly appreciate it!


The simplest way would be to clone the right portion 7 times and overlay them stacking on each other using absolute positioning, set opacity to 0, and give each a different class name (content1, content2, etc.). Then, set an interaction on each link to fade in the respective content on hover (opacity 1), and fade out to 0 on hover out.

Edit: Oh wait, this won’t work as one link has to be hovered at all times.

Hey Sam,

Thanks for jumping in here…

Yeah, it’s the one link having to be hovered at all times that is jamming me up.

But I really appreciate your help!

Instead of an interaction, you have to use JavaScript for this. Could you create the 7 links and 7 content blocks, then paste the published link here?

That’s what I was afraid of… Writing the JS for that is out of my skill set.

I will dig around the web and see if I can learn the JS needed to complete this approach.


What I’m saying is, I can take a look for you if you can do the elements part and show me what you have done.

Ok, so now I think I’m worse off then I was when I started lol

I tried a different approach and I don’t think it’s going to work.

Here is the link to what I’ve built so far

I really appreciate you trying to help me with this!

If you plan on using background image, then you have to set up 7 different classes to display the corresponding image for each link.

Example of combo class each with different background image::

Link 1 - hero-background image1
Link 2 - hero-background image2
Link 3 - hero-background image3
Link 4 - hero-background image4
Link 5 - hero-background image5
Link 6 - hero-background image6
Link 7 - hero-background image7

Hey Sam,

Thanks for sharing this approach! For some reason I am unable to execute the hover interaction. I have followed this tutorial and I am not able to ‘Affect A Different Element’ once I have labeled the element.

I will keep trying… fingers crossed


Hi @Sports_Bro_89, it would be really helpful if you could share the read-only link to your site design, then we can take a look how you have things setup. This is especially helpful when you are trying to setup the hover interaction.

Take a look at the posting guidelines: Posting Guidelines for the Design Help Category

Happy holidays!

Hi Dave,

Thanks for jumping in here!

Here is the link to my site design

Hopefully this is helpful

Thank you for your time!


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.