<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family:Consolas, monospace; } h1 { text-align: center; } img { max-width: 100%; } .img-expension { width: 400px; margin: 0px auto; } /*이미지에 마우스를 올리면 스스륵 이미지가 확대*/ .img-expension img { transition: all 0.2s linear; } .img-expension:hover img { transform: scale(1.4); } /*이미지가 확대되지만 전체 크기는 변하지 않게 하고 싶다면 overflow: hidden 추가*/ .img-expension { width:400px; margin:0px auto; overflow: hidden; } </style> </head> <body> <h1>Hover Effect</h1> <div class="img-expension"> <img src="images/image01.jpg" alt=""> </div> </body> </html>
HTML에서 img src 이미지에 아래와 같은 CSS를 주면, 마우스를 해당 이미지에 올렸을 때 크기가 변한다.
/* 이미지에 마우스를 올리면 스스륵 이미지가 확대하고 싶다면 */
.img-expension img { transition: all 0.2s linear; }
.img-expension:hover img { transform: scale(1.4); }
/* 이미지가 확대되지만 전체 크기는 변하지 않게 하고 싶다면 overflow: hidden 속성을 추가 */
.img-expension { width:400px; margin:0px auto; overflow:hidden; }
No comments:
Post a Comment