웹디자인
마우스 오버시 이미지 확대 css팁
깽아네
2018. 11. 29. 17:27
728x90
안녕하세요. 오늘은 이미지에 마우스 오버시 이미지가 확대되는 css에 대해서 포스팅 하려고 합니다.
웹 사이트별 css입니다.
transform:scale(1.1); /* default */
-webkit-transform:scale(1.1); /* 크롬 */
-moz-transform:scale(1.1); /* FireFox */
-o-transform:scale(1.1); /* Opera */
예제
<html>
- <html>
- <div class="con_box">
<div class="scale"><img src="/images/m_radger_3.png"></div> - </div>
- </html>
<css>
- .scale {
- display : inline;
padding : 0 9px; -
transform : scale(1);
-
-webkit-transform : scale(1);
-
-moz-transform : scale(1);
-
-ms-transform : scale(1);
-
-o-transform : scale(1);
-
transition : all 0.3s ease-in-out; /* 모션 부드럽게 */
-
}
-
.scale:hover {
-
transform : scale(1.2);
-
-webkit-transform : scale(1.2);
-
-moz-transform : scale(1.2);
-
-ms-transform : scale(1.2);
-
-o-transform : scale(1.2);
-
}
-
.con_box {width:1200px; height:500px; overflow:hidden }
728x90