Membuat efek zoom pada gambar dengan CSS
IRVAN EFENDI
Thursday, September 19, 2013
Membuat efek Zoom pada gambar dengan CSS atau memperbesar gambar secara otomatis ketika di sentuh oleh cursor. Tutorial ini adalah bagian kedua dari tutorial sebelumnya yaitu
Membuat efek Zoom pada gambar dengan jQuery bagian ini lebih simpel dari yang sebelumnya dan tanpa script jQuery namun dalam penerapannya harus manual.
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin>
atau </style>
4. Lalu tambahkan kode CSS
berikut ini tepat diatas kode ]]></b:skin>
atau </style>
.zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
.zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}
5. Kemudian
save template,..
Penerapannya:
Gunak
an script HTML dibawah ini untuk memanggil CSS diatas
<div class="zoom">
<img src="URL GAMBAR SOBAT" /></div>
Semoga bermanfaat,..
Bermanfaat? Bantu share ya sobat