Changing background images on link hover - CMS Collection

[Fine_Gumpert]

Hello Everyone,

I am building a website for a friend. His film and commercial projects are all in a collection list on the home page, linked to their individual project pages. Whenever a client hovers on one of the project titles, the background image for the whole home page is supposed to change to an image titled “home image” in the cms collection.

Here is my read only link: Webflow - 405 Curated

I’ve tried many different versions of the interactions (as siblings and as children) and read many of these forum articles, but nothing seems to work. Either the hover effect works, or the position is right, but so far no soultion for both.

Really hoping to get some help here.

[Stan (justAnotherDeveloper)]

hi @Fine_Gumpert there are various ways “how to” I have created one that will be simplest for you to understand and hopefully easy to implement in WF. You may need to add custom CSS.

a:hover + .bg-img {
	visibility: visible;
	transition-delay: 0s;
	opacity: 1;
}

to make it work, as Im not sure if it is possible to create such simple interaction in WF

EDIT: I have add simple JS example to make it work on mobile devices as they do not support “hover” but have “touch” instead

[Fine_Gumpert]

@Stan

a:hover + .bg-img {
	visibility: visible;
	transition-delay: 0s;
	opacity: 1;
}

Hey Stan,

Your example looks great, thank you so much! Unfortunately, I don’t think it works, or at least I am not doing it correctly. Here’s a new read only link:

https://preview.webflow.com/preview/405-curated?utm_medium=preview_link&utm_source=designer&utm_content=405-curated&preview=5a21e860a87a5353861b16fa8328bc59&locale=en&workflow=preview

I’m not sure, if I put the custom code element in the wrong place, or if maybe it’s not possible to create an interaction with custom code that way. I also tried the other code languages (html, ccs and Java Script)

Do you have an idea what I might be doing wrong?

[Stan (justAnotherDeveloper)]

hi @Fine_Gumpert my example is for study how it can be done and it will work. I will suggest you will visit WFU (Webflow University) and learn how to use custom code and where can be implemented or search in this forum where you will find many solutions related to custom code placement.

BTW I’m using my class names so you should use yours as I’m not aware you have class bg-img etc.

Implemented code like that would not work !!