Comment ajouter un effet d'ombre portée à la souris pour les images circulaires?

Question

J'essaie de réaliser quelque chose comme le milieu de https://www.popexpert.com, où un survol d'images circulaires active un effet d'ombre portée. Comment puis-je atteindre cet objectif? J'ai essayé d'utiliser CSS, mais l'effet d'ombre portée a abouti à une ombre carrée.

Answer 1

Vous pouvez obtenir cet effet en utilisant les propriétés box-shadow et transition de CSS3. Voici l'exemple de travail dans le JSFiddle. Notez que j'ai utilisé la propriété border-radius pour créer un cercle.

Answer 2

Quelque chose comme ceci:

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