Glow/blur effect doesn't work on hover, icon scale effect doesn't work on image hover


I have set a div for glowing effect /blur 15px but it only works when it’s not on hover.

I have also set a transform 1.3 scale for the image to expend on the .dh-active img and it doesn’t work either.

What could be the problem?

The problem is that I need to have 2 layers.

1 layer is the icon that needs to expend
2 layer is the glow square

The hover can’t work on 2 elements together, it works only on the top layer.

How can I configure it so that when I hover on the icon, it will expand with the scale 1.2 and the glowing layer beneath will have the blur effect working?

Here is the glow element on top of the icon so it works

And here the icon is at the top so only the scale effect works

And by the way, when do I choose hover global image, and when do I choose active global image?

And when I choose global and when I choose global (first children)?

You should be using hover for this. Active is not for this, active state is for something completely different, such as tabs, accordions and some more stuff, active doesnt play any role in this example

1 Like