Streaming live at 10am (PST)

Change images on hover and remain on hover out


#1

Hi everyone,

First time user of Webflow and first time posting on the forum, so please be gentle :slight_smile:

Have tried not to be too annoying and included links below and have searched existing threads but cannot find this (please do point me in the right direction if you know otherwise though).


I have two link blocks on my home page, both that will link to a different project on my portfolio website. On hovering over a link block, I’d like the background image to change to the relevant project.

So, I’d like things to work like this:

  • On load, project 1 background is visible.

  • If I hover on project 2 link block – the project 2 image fades in. It then remains visible on hover out.

  • If I then hover on project 1 link block – the project 1 image fades in. It then remains visible on hover out.

  • At any point, should I hover over a project who’s image is already visible, no change of image should happen. The image will only appear on hover should it already not be visible.

FYI – Each link block also has an interaction already applied – some ‘learn more’ text appears and a div changes colour on hover, and disappears on hover out. I’d like that to remain.


The issue I’m having is that I can’t work out how to make the image remain once you’ve hovered over it – or only not try and fade in again if it’s already visible (and cause the other image to appear suddenly and then fade out to reveal the image that was already there).

Any help would be gratefully received.

Thanks!


Here is my public share link: https://preview.webflow.com/preview/john-hitchcox-portfolio-b5bed3a7a45ab56?utm_source=john-hitchcox-portfolio-b5bed3a7a45ab56&preview=bbc5bf66d06e2bf5fee271e352edba15

https://john-hitchcox-portfolio-b5bed3a7a45ab56.webflow.io/


#2

It is possible.

create hover ix like this:

  • on hover two things happen - first, things appear, second - things dissapear :slight_smile:
  • on hover out nothing happens

I hope this will give you food for thought and you will resolve this but you will need to make sure you structure your content accordingly for this to work. If not let me know.


#3

Hi Dram, thanks for taking the time to respond, really appreciated.

I may not completely understand and it may come from your mention of needing structuring the content accordingly – maybe I haven’t – but I’m not sure that this works. The structure I currently have is a div containing image 2 above a div containing image 1. Both set to fill the vertical height and 100% width.

For what I’m trying to achieve, I don’t want an image to suddenly ‘appear’.

On page load, image 1 is visible in the background.

If a hover over link block 1 (and I apply your suggestion) image 2 suddenly appears, and then fades away.

As it was never there to begin with it, that’s really confusing for the user.

I could be misunderstanding – and if so, I apologise! – but hopefully you can help.

Thanks!


#4

In an attempt to better explain myself, this is similar to what I’d like to achieve:


#5

Just have a look and see the way I set this up for you.


#6

Thanks Dram – your example is perfect. Will try and ad that same structure into my website tonight.

HUGELY appreciated :smile:


#7

Great! Let me know how that goes.


#8

Dram, you’ve saved me – thank you!

So clear now, but I just couldn’t work it out, so thanks again for the help, especially taking the time to build the example, incredibly helpful.


#9

My pleasure. It requires a bit of familiarity with the tool, and then you just structure everything in your head even before you start building your interaction.