관리 메뉴

웹개발자의 기지개

[CSS] 이미지(img) 롤오버시 약간 커지게하는 효과 본문

웹퍼블리싱/CSS

[CSS] 이미지(img) 롤오버시 약간 커지게하는 효과

http://portfolio.wonpaper.net 2024. 3. 10. 20:30

 

1
2
3
4
5
6
7
8
9
10
a img {
  transition: all 0.2s linear;
}
 
 
a:hover img {
  transform: scale(1.03);
  margin: 0px auto;
  overflow: hidden;
}
cs

 

transition 으로 서서히 자연스럽게 움직이는 효과를 주고, 롤오버시에는 scale 을 줘서 약간 키운다.

 

1
2
3
4
5
6
7
hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
 
 
 
style="cursor:pointer;transition: transform .2s;margin: 0 auto;"
cs
Comments