Changing Image on Text Hover

Design help Animations & Interactions
1

Hey Guys! First of all I wanna appreiciate the webflow community for helping each other out, especially all the moderators and staff. Now coming down to the topic, I want to create a section in which when i hover over a particular text, i want the image next to it change. A good example maybe the work section in https://studiovalido.com/. I already looked for this in webflow university and forums but its not there, except a forum answered by @magicmark which focuses on changing the background image on hover(which didnt worked for me).

…
Here is a read only link of my project:https://preview.webflow.com/preview/ms-exceptional-project-4b1160?utm_medium=preview_link&utm_source=dashboard&utm_content=ms-exceptional-project-4b1160&preview=1f2ea707c2a6ad3916b1dc388d7dc894&mode=preview

2

@magicmark @PixelGeek , Can you work this out?

3

Hey @M_K, :wave:

The tutorial I did on this covers this exact steps. What was the result when you tried this, or do you know where you struggled to get this working?

4

Actually, i dont want the background image to change but the image next to the text. The problem i am facing is :thinking: :thinking: ; I actually dont know what i am doing wrong and i am confused as hell :dizzy_face: :exploding_head:.Its that i am pretty new to webflow. It will be a lot better if you take a few minutes to analyze what i am doing wrong and just screen record the solution(if possible). Thanks alot bro :slight_smile:

5

What you have right now is kind of the right direction. You just need to make sure that youhave the interactions set up on the right action like this:

What you have now is this, which won’t work:

Image 2020-04-14 at 1.26.42 pm
Image 2020-04-14 at 1.26.42 pm244×1024 15.9 KB

You need to have the right action matched up with the right animation. Hover in = hover in animation etc.

Shared with Zight

These settings give you the desired effect on the Hooli link.

6

Image swap on hover
Image swap on hover1583×757 164 KB

Hey Mark! Sorry for that silly mistake :sweat_smile:, I then followed on your steps and it worked :smile:
But I am still facing a few issues which i am not able to solve :confused:

  1. When i hover over the text elements repeatedly a scrollbar and the glimpse of the previous image occurs on the published site. I tried to change the overflow to hidden but that doesnt work…

  2. When the site loads i want the hooli image to be preloaded and when i hover out over the text blocks i dont want the images to disappear but to stay. I tried to play around with the display properties of the images but that doesnt work either. :confused:

7

Hey @magicmark Is there a tutorial on this?? I’m trying to do the same thing myself. I actually saw @M_K site and it’s working nicely there. It’s exactly what i want to achieve.