Streaming live at 10am (PST)

Change bg color on hover in webflow ecommerce

i was trying to pull color for page bg , from ecommerce where it’s already there and related to products . So i want to change color on text hover . right now it’s changing color but it’s only taking one color that present in products , i want that it’s change color accordingly to the products color . it’s taking the last product color which is blue . and the bg color is not taking the screen size .

can you help me with this is am stuck here for so long and i also looked the video of pixel geek that shows the change in bg video on hover (dynamic content ) . but anyhow it’s not working .
here’s my read only link


What if you put another div block covering it all with Absolute positioning. You’d pull background color for that div block. Have it 0% opacity for that div block and go to 100% on hover. Basically, you’re showing and hiding the div block.

Yea but how can I take colors from CMS or e-commerce that’s the main issue , it must take bg color form those on hover .

Hey Atharv.

You are actually facing this issue partially because you have not fully set up your collection list on the page. It is, in fact, pulling background colours from e-commerce, but your collection items are set to absolute position, relative to the body, fill the viewport. This is causing your items to stack on top of one another relative to the body, and the Nrthra product is the one that is displaying on top so you are seeing its background colour.

I would recommend setting up your collection to display however you would like it to display, so that you can consistently see all products, then worry about this interaction. It won’t be hard to set up at that point.

AC