[CSS] 마우스 오버시 이미지 확대

 

 

 

 

마우스 오버시 이미지가 확대되는 효과입니다.

 

 

이미지 출처 : Unsplash의 Mae Mu

 

 

 

1. CSS

 

.img_list { list-style: none; width: 100%; overflow: hidden; }
.img_list li { float: left; width: 33.3%; padding: 2%; box-sizing: border-box; }
.img_list li:nth-child(3n+1) { clear: both; }
.img_list li a { display: block; position: relative; width: 100%; height: 0; padding-top: 75%; border-radius: 20px; overflow: hidden; }
.img_list li a:hover { margin: -1px; border: 1px solid #0026dd; }
.img_list li a img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transition: all 0.3s linear; }
.img_list li a img:hover { transform: scale(1.1); } /* 확대 비율 */

 

 

 

2. HTML

 

<ul class="img_list">
    <li>
    	<a href="#" target="_blank"><img src="이미지주소" alt="이미지설명" /></a>
    </li>
    <li>
    	<a href="#" target="_blank"><img src="이미지주소" alt="이미지설명" /></a>
    </li>
    <li>
    	<a href="#" target="_blank"><img src="이미지주소" alt="이미지설명" /></a>
    </li>
</ul>