Glow Effect - Box Shadow inside the div


I try to add a glow effect that will start from the inside of the div when hovering and it only glows outside.

How can I achieve that?

The solution is to add filter blur 50px in my example in the div effects (not in hover)

The problem is when I look at it on Safari browser, the glow effect is square and not round.

Is that a compatibility issue or a bug?

Hey, can you provide your website URL, please?

1 Like

There is also a problem with having the div glow effect work only under the image.

When I add Z-index higher to the image, the glow effect doesn’t work.

Is the glow effect possible to be under the image and not above?

Why does the glow effect work only if the Div of the glow is higher in z-index than the image?

A higher z-index will place elements above the one with a lower one.

So, if you want to have an image above the glow effect, you should put a higher z-index to the image and a lower one to the glow div.

But if you set the image above the glow, hover will not trigger. So what you can do is to set the pointer-event: none to the image:

What this does is prevent the image from being clickable or detected by the cursor at all, so when you hover over it, it will register hover over a glow div and trigger the hover effect while keeping the glow UNDER the image.

1 Like

Great success :slight_smile:

Thanks a lot, it looks beautiful!

Can you please check why in other browsers such as Safari it doesn’t look as it should?

This is a very popular browser. I hope it can work fine on Safari too.