Streaming live at 10am (PST)

Image Swap On Hover


#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 http://dennisadelmann.de/index.php

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. http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link. This is especially helpful when you are trying to setup the hover interaction.

Take a look at the posting guidelines: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

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.