Streaming live at 10am (PST)

Swap image on hover - NEED HELP!


#1

I am new to Webflow. I’ve created my own site before using Dreamweaver where I could easily swap an image on hover, but I’m finding it very difficult to do on Webflow.
I’ve watched your tutorials and read lots of posts on the forum but I can’t seem to find the answer. I also read an old post where there was a link to a tutorial entitled ‘swap image on hover’, but when I clicked on the link the tutorial was no longer there.
What I want to do is hover on an image and have it appear to swap to a different image of exactly the same size, shape and position, then go back to the original image after hover.
What I have read seems to imply that the best way is to place the image directly behind my current image with opacity set to 0%, and then on hover change its opacity to 100% and my original image opacity to 0%. But it just seems so chunky and complex. As there are multiple images I want to do this to it would mean I would have lots of images on top of each other on my screen - surely there’s another way.
I also read about someone having a button, and just setting the background of the button to change. Should I change my image to a button instead?
Starting to get very frustrated - hope someone can help. Would be very happy to just watch a tutorial on it if one exists.
Many thanks in advance to anyone who has the time to help!
Michelle


#2

Which is this old post you are referring to?


#3

It was a 2015 post, and the reply was from ‘Waldo’, who writes:
"Also here’s a tutorial on the hover swap items in the old User Interface: http://tutorials.webflow.com/show-content-on-hover"
But the link just took me to the new tutorials not to the specific tutorial mentioned.


#4

Yes, it’s a known issue that all tutorial links on this forum is broken at the moment as they have deleted all the old content and uploaded new videos.


#5

Thank you Samliew.

So does anyone know the best way to swap images on rollover who can explain it to me? And/or is there a new video explaining this process?


#6

Change An Image's Image On Hover (without interactions)


#7

@linden what you can do is:

1.) Place 2 images in a div, and make the div position: relative
2.) Make the 2nd image position:absolute and set it to cover
3.) Make the 2nd image have opacity 0, and on hover opacity 100%. Add a transition to give it a nice fade effect.

here is a screencast showing this in action: https://screencast.com/t/6iO4GPoBMo

Let me know if this helps or if you have other questions


Fullscreen & fixed Position
#8

If you don’t want to have any transitions/effects, and just want a simple swap, then you can avoid doing that three steps for every image you need this functionality on (especially if you have a lot of hover image), by using my tutorial instead.

The downside is that you can’t replace these images from the Editor, and you need to change this from the Designer view.


#9

So many thanks to both of you. I’ll check out both tutorials and see which one works best for me! Have a great day : )


#10

OK, so I’ve checked out both tutorials. Samliew, I like that your solution doesn’t include multiple images on top of each other but unfortunately i do need some transitions to make the change a bit smoother. So that means that I might need to use your solution Justin, I was just hoping there was a simpler way. But thanks again to you both, I’ll see how i go with it.


#11

If you need transitions, then Justin’s way is the simplest.


#12

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