CODEWITHSUNDEEP
javascriptcssdropshadow
Jacob J. Zhang
Jacob J. Zhang

Reputation: 23

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

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.

Upvotes: 1

Views: 6286

Answers (2)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

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.

Upvotes: 2

Nick R
Nick R

Reputation: 7784

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);
}

Upvotes: 1

Related Questions