How do I add a mouseover drop shadow effect for circular images?

Question

I'm trying to achieve something like the middle of https://www.popexpert.com, where a hovering over circular images activates a drop shadow effect. How can I achieve this? I tried using CSS, but the drop shadow effect resulted in a square shadow.

Answer 1

You can achieve that effect by using box-shadow and transition properties of CSS3. Here is the working example in the JSFiddle. Note that I've used the border-radius property to make a circle.