Cara membuat efek zoom gambar saat disorot mouse

Oleh Unknown

Sabtu, 28 Juni 2014

Bagikan :

Tweet

Sebelumnya Kang PP mengucapkankan selamat Memasuki Bulan Ramadhan 1435 H dan di awal Ramadhan ini marilah kita saling memaafkan serta berlomba-lomba dalam kebaikan. To The Post, kali ini kita akan membahas tentang " Cara membuat efek zoom atau membesar pada gambar postingan ketika di sorof mouse.

Efek ini bisa memudahkan pengunjung untuk memperjelas gambar yang ada tanpa perlu mengklik atau lainnya dan tentu otomatis membesarnya.

Berikut Langkah-Langkahnya :                                                

1.   Pertama-tama mari kita masuk ke blogger.com
2.   Kedua masuk ke Dasboard > Template > Edit Html
3.   Silahkan cari kode ]]></b:skin> atau bisa kode </style> , lalu letakan kode berikut di atasnya

.post 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 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
} 

4.   Simpan Template
5.   Silahkan ke postingan lihat berhasil atau belum.

Ternyata mudahkan, silahkan berkomentar dan Jangan pelit untuk berkomentar.

Tag : Tutorial Blog