Dynamic Color on Hover?

Hi all,

Firstly, love the new CMS feature. I’m a web designer and I use webflow for my own portfolio.

I have run into a bit of an annoying issue, and thought I’d ask if anyone knows a solution. I think I already know the answer, but I was hoping someone might have a simple workaround or something…

Basically I’ve set up ‘case-studies’ in the CMS, and each case study has a unique color assigned to it. I want to pull that colour into a dynamic list, but only on hover. So if the color was red, when the user hovers over the dynamic list for that particular item, it shows a red bg. Hovering over the next one in the list might show blue for example.

I can’t see any obvious way to do this, so any help would be super!

Thanks in advance,
Russ

2 Likes

As the color pulling from db is only done in the settings panel, there is nothing you can do to call it on CSS :hover in the styling panel. So you’re going to have to create an element that pulls the color from db, and show/hide it with interaction with a hover trigger.

1 Like

I was trying to do this exact same thing yesterday. @vincent’s solution is what I did too. Would be a great feature.

Either a show/hide or opacity 0%-100% with an ease effect will do this.
The nice thing is that you only have to add the interaction to one item in the dynamic list (if the background color is a nested element, set to absolute positioning, 100% width + 100% height, z-index behind the other content) and it will display the appropriate one for all the remainder of the list items. :smile:

Please let us know if you have any questions @russellclow

Thank you,

Waldo

1 Like

Oh yes @Waldo is right no need for an interaction by using opacity and hover.

Great thanks guys - appreciate the help :slight_smile:

1 Like