원형 이미지에 마우스 오버 그림자 효과를 어떻게 추가합니까?

Question

중간에있는 https://www.popexpert.com과 같은 것을 얻으려고합니다. 원형 이미지 위로 마우스를 가져 가면 그림자 효과가 활성화됩니다. 이것을 어떻게 할 수 있습니까? CSS를 사용해 보았지만 그림자 효과로 인해 사각형 그림자가 생겼습니다. 이 같은

Answer 1

CSS3의 box-shadow 및 transition 속성을 사용하면 그 효과를 얻을 수 있습니다. JSFiddle의 작업 예제는 다음과 같습니다. 서클을 만들 때 border-radius 속성을 사용했습니다.

Answer 2

뭔가 :

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