How can add the full background image on collection listing?

Design help CMS
1

Hi,
I want to add a full page background image on each category on hover. I was able to do it on separate links, but I can’t figure it out how can I show different background image linked to each category on CMS.

Any idea how can I do it?

Here is my public share link: [LINK](Webflow - Zeinab's Fantastic Site)
(how to access public share link)

2

I can recommend some approaches, but the devil is in the details so to speak.
You’ll need to work those out to your liking.

INTERACTIONS APPROACH

  • In each collection list item, include the background image you want.
  • Position that image as fixed, or absolute to a relative parent. Size it to fill the screen.
  • z-index your buttons so that they are above the backgrounds. All of the backgrounds can be at the default z-index. All of the buttons need to be at a higher z-index, but can all share the same z-index.

Add an interaction, triggered on button hover. It will;

  • Hide all of the images ( by class )
  • Show just the sibling image

You can add easing to fade out everything, fade in the right one, etc.
Note: interactions is a bit wonky lately on targeting lately, so you may get stuck here in which case;

GSAP APPROACH

This is essentially script-based interactions. A very popular lib, very well built. You’ll get way more control here but you’ll need to do custom code and read a bit.

Check out Timothy Ricks’ tutorials on youtube if you want to see what GSAP can do.

CSS APPROACH

Same element arrangement as before, but instead of interactions I think you can make this work with a custom CSS construction, something very roughly like-

.test1000 {
  visibility: hidden; // hide all backgrounds
}
.button:hover + test1000 {
  visibility: visible; // only show the one adjacent to a hovered button 
}