[CSS] 마우스 hover / 이미지 확대 2가지 방법

이번 시간에는 마우스를 이미지 위에 올렸울 경우 이미지가

확대되는 2가지 방법에 대해서 알아보겠습니다.

1. 이미지 전체 사이즈가 확대되는 경우

2. 이미지가 확대는 되지만 전체 크기는 고정인 경우.

---

이미지 확대(전쳬)

먼저 이미지 전체가 확대되는 방법입니다.

transition 속성은 이미지를 부드럽게 커지게 하기 위해 추가 하였습니다.

hover : 마우스를 올렸을 경우를 정의하는 가상 클래스

transform: scale(1.4) : 이미지가 얼마나 확대 될지 정의합니다.

<!-- HTML -->
<h1>Hover 이미지 확대효과</h1>
<div class="a">
  <img src="img/사슴.jpg" alt="">
</div>
   
/* CSS */
 h1 {
    color: green;
    background-color: grey;
    font-size: 20px;
    text-align: center;
    font-family : 'Nanum Gothic';
}

img {
    max-width: 100%;
    transition: all 0.2s linear;
  }

.a  {
    width: 400px;
    margin: 0px auto;
}

.a:hover img {
  transform: scale(1.4);
}

 

전 -> 후

 

 

 

 

 

이미지 확대(크기 고정)

이미지 확대 시 전체 크기는 고정인 상대로 확대되는 방법입니다.

overflow: hidden 옵셥을 .a 스타일에 추가해 줍니다.

a. 스타일의 width: 400px 의 크기 안에서 이미지가 확대되는 것을 볼 수 있습니다.

<!-- HTML -->
<h1>Hover 이미지 확대효과</h1>
<div class="a">
  <img src="img/사슴.jpg" alt="">
</div>
   
/* CSS */
 h1 {
    color: green;
    background-color: grey;
    font-size: 20px;
    text-align: center;
    font-family : 'Nanum Gothic';
}

img {
    max-width: 100%;
    transition: all 0.2s linear;
  }

.a  {
    width: 400px;
    margin: 0px auto;
    overflow: hidden; 
}

.a:hover img {
  transform: scale(1.4);
}

전 -> 후