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.

Answer 2

Something like this:

JSFiddle Demo

HTML

<a href="#">test</a>

CSS

a {
    width:100px;
    height:100px;
    display:block;
    background:yellow;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
a:hover {
    -webkit-box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
}