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

 

a img {
  transition: all 0.2s linear;
}
 
 
a:hover img {
  transform: scale(1.03);
  margin: 0px auto;
  overflow: hidden;
}

 

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

 

hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
 
 
 
style="cursor:pointer;transition: transform .2s;margin: 0 auto;"

 

 

.main_sec3_con2 li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.3s;
    transform-origin: center;
}
 
.main_sec3_con2 li .img:hover img {
    transform: scale(1.08);
}