Image Swap On Hover

Design help General
1

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 Dennis Adelmann — Multidisciplinary Design | Projects

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

-Matt

2

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.

3

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!

4

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?

5

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.

Thanks!

6

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.

7

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 http://matts-dynamite-site.webflow.io/

I really appreciate you trying to help me with this!

8

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

9

Hey Sam,

Thanks for sharing this approach! For some reason I am unable to execute the hover interaction. I have followed this tutorial http://help.webflow.com/lesson/hover-trigger-interaction and I am not able to ‘Affect A Different Element’ once I have labeled the element.

I will keep trying… fingers crossed

Thanks

10

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. Share a read-only link | Webflow University. 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 - General - Forum | Webflow

Happy holidays!

11

Hi Dave,

Thanks for jumping in here!

Here is the link to my site design https://preview.webflow.com/preview/matts-dynamite-site?preview=e30236632565a4d520e7aff7babbefe1

Hopefully this is helpful

Thank you for your time!

-Matt

12

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