How do I create multiple hover elements?

I’m trying to replicate this example:




I’m stuck on how to give the “tileRowLink” style the ability to change the text colour of “Technology” to white and swap the icon image. At the moment I can only change the colour of the div itself.


Try to give a block 100% width and height with hovered element and give it 0% opacity. When you hover, make it opacity to 100%.

Or since webflow doesn’t quite yet support pseudo classes on parents effecting children states, you may have to add the hover event to the actual text block and use padding to make it match the width/height so you change both the background and text color at once.

Or to make a background sprite image and on hover move the background only. That will work for an icon :wink:

Exactly, you can have all 3 styles change on hover in one text block, the bg color, the bg image and position (sprite as @bartekkustra suggested), and font color.

I believe I am trying to accomplish something similar:


1 - Mouse outside Div region:

2 - On hover, I want to take the div’s BG and add a transclucent color overlay with transition.


Right now the Image is always above the BG fill, so the transition effect does not work on the image.

Animating a background image can be a bit challenging due to some browser limitations, especially the body elements background.

I’ve found most of the time I have to have my base background (your upper image) always display, then set an overlay container with another background (your second image) then set the default properties to opacity: 0 and some transition durations defined, then set the hover state as opacity: .75 or something.

It should then fade in/out nicely on hover.

Sorry if this is a silly question, but does Webflow support pseudo classes such as :before and :after now? That would be a good way to take care of the need for multiple backgrounds.

Right now I think it has to be done via the head embed area using script tags.

as @pingram3541 said you’ll have to target the classes and add custom css in the Custom code, or embed some code inside the designer.

We’re working on the UI for adding more complex selectors like .class:hover .class2 { }
and trying incorporate :before and :after pseudo classes into that control as well. So hang tight for that, but for now you’ll have to add custom code.

1 Like

Plus ∞ for :before and :after !

2 Likes

Hi, any updates on this? Would be really useful to be able to easily set hover states for images and a combination of graphic and text combined into the same div. Many thanks!

1 Like

I’d like to see this ability added to the platform.

I went to interactions, thinking it would allow this, but no luck.

Any update?

1 Like