1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .box { width: 200px; height: 200px; overflow: hidden; } .box span { width:100%; height:100%; display: inline-block; background-color: white; background-image: url(images/test.jpg); background-size: cover; background-repeat: no-repeat; background-position: center top; -webkit-transition: transform .3s ease-out; -moz-transition: transform .3s ease-out; -ms-transition: transform .3s ease-out; -o-transition: transform .3s ease-out; transition: transform .3s ease-out; } .box:hover span{ -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ -o-transform: scale(1.5); transform: scale(1.5); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ } </style> </head> <body> <div class="box"> <span></span> </div> </body> </html> |
반응형
'CSS' 카테고리의 다른 글
| [CSS] 이미지 수직 수평 정렬 (0) | 2018.09.11 |
|---|---|
| [CSS] 텍스트 수직 수평 정렬 (0) | 2018.09.11 |
| [CSS] background-image opacity - 배경이미지 투명도 적용하기 (2) | 2017.01.06 |
| [CSS] 텍스트 그라디언트 넣기 - css text color gradient (0) | 2017.01.05 |
| [CSS] 인라인요소 수직, 수평 정렬 - vertical-align: middle (0) | 2016.11.14 |
