Streaming live at 10am (PST)

Swap an image in place of another image on hover

How do I swap over an image for another image on hover?

I also want to do the same thing on hovering/clicking over a link on the page too

Can I do this with interactions or is there another way of doing it?

I would use interactions to solve the problem

I’m not sure how to be honest.

Will try to explain. Drop multiple images on the same place. I assume you have div as a cotainted. Then use show and hide in the interaction for each image

This is as far as I’ve got https://preview.webflow.com/preview/west-end-observatory?utm_medium=preview_link&utm_source=dashboard&utm_content=west-end-observatory&preview=29aa759854faf20daa1b86a9d58a1ead&mode=preview

If you hover over the building image on the right it’s flickering.

@webdesignessex

On my iPad now, need some time until I’m @ my computer
Cant find it where do i find the image

Thanks. It’s on the “The building” page.

I’m trying to hide “building_img” on hover and show on hover out.

And at the same time show "5th_floor on hover and hide on hover out.

So basically swapping the image that is viewed on hover/hover out. Feels like a simple task but is very complicated it seems.

Hi,

Try the following:

  • Add a Div to wrap your images
  • Add 2 image blocks (I usually prefer adding a Div with the image as Background)
  • Give them different class names and make the one “on top” positioned as absolute, covering the “below” image
  • Add a hover animation to the parent Div that makes the “top” image’s opacity go to 0 once you hover in and back to 100 on hover out.

Hope it helps!

1 Like

This worked out really well. Thank you very much.

Not great on touch devices as “mouse hover” is not supported of course.

Is there any way this can be made better for touch?

1 Like

Not that I know. Some devices can have a “hover” effect when pressing and holding the finger on the element, but tbh, I wouldn’t count on having those types of interactions on mobile.

Hi there,

Looks like you’ve got it sorted, but is there any reason why you couldn’t have just had the image as the background-image element of a div and change that image with the ‘Hover’ state?
Nothing wrong with Paco’s approach, but the Hover State approach works the same and doesn’t require Interactions, so it’s a bit simpler. (With Paco’s however you can get a fade effect, which may be preferable).

Grant

2 Likes

Here is a sample with mouse over interaction that you can modify. Works ver simple

1 Like