Swap an image in place of another image on hover

Design help Animations & Interactions
1

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?

2

I would use interactions to solve the problem

3

Iā€™m not sure how to be honest.

4

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

5

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.

6

@webdesignessex

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

7

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.

8

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!

3 Likes
9

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
10

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.

11

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

3 Likes
12

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

1 Like
13

Do you have an example of this on a site??

14

Thanks a lot! Itā€™s exactly what I was looking for and so easy :sweat_smile: