Bandung —
Membuat Gambar Membesar Saat Disentuh Kursor. Artikel kali ini merupakan trik blogging kelanjutan dari artikel sebelumnya. Jika artikel yang lalu membahas Membuat Efek Hover pada Link Teks Membesar, kali ini yang dibuat berefek adalah pada gambar. Apa jadinya jika gambar di postingan blog tiba - tiba membesar saat kursor mendekat? pasti menarik bukan! Untuk contohnya lihat gambar berikut ini.
Bagaimana? tertarik. Efek ini hanya CSS, tidak menggunakan javascript, sehingga tidak memberatkan loading blog.
- Dasboard - Template - Edit HTML
- Tambahkan kode berikut diatas ]]></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); }
- Save
NB : Source Code by Wadah Tutorial
Semoga informasi tentang Membuat Gambar Membesar Saat Disentuh Kursor bermanfaat bagi Anda yang membutuhkan.