Membuat Gambar Membesar Saat disentuh Cursor
Cara Membuat Gambar Membesar saat disentuh Kursor
Cara Membuat Efek Membesar atau Zoom Pada Gambar
Cara Membuat Gambar Membesar saat disentuh Kursor
Cara Membuat Efek Membesar atau Zoom Pada Gambar
Pada postingan ini saya akan berbagi tentang bagaimana cara agar gambar yang ada di blog kita apabila disentuh oleh kursor maka gambar tersebut akan membesar.
Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.
Langsung Ke TKP
1. Login ke blogger.
2. Pilih Template > Edit HTML
- Sebelum mengedit saya sarankan untuk terlebih dahulu membackup template anda karena ditakutkan apabila salah penempatan script akan berakibat rusaknya tampilan blog anda
4. Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Versi lain
.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;
}
5. Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.
Sekian tutorial Cara Membuat Gambar Membesar Saat disentuh Cursor Trimakasih atas kunjungannya Semoga bermanfaat selamat mencoba
