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.
How do I add a mouseover drop shadow effect for circular images?
-
01-06-2022 - |
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.
Solution
OTHER TIPS
Something like this:
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);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow