티스토리 뷰

웹디자인

마우스 오버시 이미지 확대 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>

 

  1. <html>
  2. <div class="con_box">
        <div class="scale"><img src="/images/m_radger_3.png"></div>
  3. </div>
  4. </html>

 

<css>

  1. .scale {
  2.   display : inline;
      padding : 0 9px; 
  3.  transform : scale(1);
  4.  -webkit-transform : scale(1);
  5.  -moz-transform : scale(1);
  6.  -ms-transform : scale(1);
  7.  -o-transform : scale(1);
  8.  transition : all 0.3s ease-in-out;   /* 모션 부드럽게 */
  9. }

     

  10. .scale:hover {
  11.   transform : scale(1.2);
  12.   -webkit-transform : scale(1.2);
  13.   -moz-transform : scale(1.2);
  14.   -ms-transform : scale(1.2);
  15.   -o-transform : scale(1.2);
  16. }

     

  17. .con_box {width:1200px; height:500px; overflow:hidden } 

 

 

 

728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

텝 클릭시 하단 이미지 변경되는 css  (0) 2018.12.06
absolute 가운데 정렬하는 css  (0) 2018.12.06
드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)  (0) 2018.11.13
배경이미지 슬라이드 (페이드 인/아웃)  (0) 2018.10.11
레이어팝업시 배경은 어둡게하기  (0) 2018.10.11