Membuat efek gambar membesar ketika disentuh oleh cursor atau kursor sangat membuat gambar lebih menarik dan bisa juga menarik perhatian mata pengunjung blog,
selain gambar yang bisa membesar ketika disentuh cursor atau kursor ada juga cara
agar link membesar ketika disentuh cursor silahkan baca artikelnya disini. Ketika keduanya Anda gunakan pada blog Anda setidaknya akan membuat tampilan blog menjadi lebih cantik dan menarik, serta bisa menarik perhatian pengunjung blog.
Membuat efek membesar pada gambar blog sangat mudah sekali seperti pada tutorial membuat link membesar saat disentuh cursor, cara membuat efek zoom pada gambar blog ini hanya menambahkan sebuah kode CSS yang berfungsi sebagai efek zoom atau membesar ketika cursor diletakan diatas gambar tersebut. Gambar yang membesar adalah gambar yang berada pada homepage dan halaman posting, karena kode ini khusus untuk gambar artikel atau postingan saja.
Nah pada kesempatan kali ini blog acanknazar akan menjelaskan sebuah tips atau trik agar gambar pada postingan atau artikel blog bisa membesar otomatis dengan menggunakan efek zoom. Sobat Blogger semua bisa mencoba dan menerapkan tutorial membuat gambar membesar saat disentuh cursor pada blog masing-masing. Oke langsung saja lihat tutorial cara membuat efek membesar atau zoom pada gambar saat disentuh cursor dibawah ini :
1. Masuk ke Blogger.comselain gambar yang bisa membesar ketika disentuh cursor atau kursor ada juga cara
agar link membesar ketika disentuh cursor silahkan baca artikelnya disini. Ketika keduanya Anda gunakan pada blog Anda setidaknya akan membuat tampilan blog menjadi lebih cantik dan menarik, serta bisa menarik perhatian pengunjung blog.
Membuat efek membesar pada gambar blog sangat mudah sekali seperti pada tutorial membuat link membesar saat disentuh cursor, cara membuat efek zoom pada gambar blog ini hanya menambahkan sebuah kode CSS yang berfungsi sebagai efek zoom atau membesar ketika cursor diletakan diatas gambar tersebut. Gambar yang membesar adalah gambar yang berada pada homepage dan halaman posting, karena kode ini khusus untuk gambar artikel atau postingan saja.
Nah pada kesempatan kali ini blog acanknazar akan menjelaskan sebuah tips atau trik agar gambar pada postingan atau artikel blog bisa membesar otomatis dengan menggunakan efek zoom. Sobat Blogger semua bisa mencoba dan menerapkan tutorial membuat gambar membesar saat disentuh cursor pada blog masing-masing. Oke langsung saja lihat tutorial cara membuat efek membesar atau zoom pada gambar saat disentuh cursor dibawah ini :
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>
.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;
}Catatan :
- Kode CSS diatas sudah valid CSS3.
- Kode -webkit-, -moz-, dan -o- dapat menyebabkan Warning saat validasi CSS3, namun masih valid CSS3.
Tidak ada komentar:
Posting Komentar