First time user of Webflow and first time posting on the forum, so please be gentle
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).
on hover two things happen - first, things appear, second - things dissapear
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.
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.
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.
Perhaps