프로그래밍/HTML & CSS

[CSS] hover 시 이미지 커지게 하기

소꿍 2021. 4. 9. 10:27

 

<style>
.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom, 사이즈가 너무 클 경우 viewport 밖으로 나가게 됨 주의! */
}
</style>

 

 

www.w3schools.com/howto/howto_css_zoom_hover.asp

 

How To Zoom on Hover with CSS

How TO - Zoom on Hover Learn how to zoom/scale an element on hover with CSS. Zoom on Hover Hover over the green box: How To Zoom on Hover Example