Membuat efek zoom pada gambar dengan CSS ~ blog sepot

Membuat efek zoom pada gambar dengan CSS

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 langkah² 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:
Gunakan script HTML dibawah ini untuk memanggil CSS diatas

<div class="zoom">
<img src="URL GAMBAR SOBAT" /></div>

Semoga bermanfaat,..

Terima kasih telah membaca artikel tentang Membuat efek zoom pada gambar dengan CSS di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.