Image Zoom Effect pada postingan ( CSS )

Tweet

Nah kali ini saya mau kasih cara membuat Image zoom effect pada postingan dengan mengguanakan CSS. Yang pasti effek nya mirip dengan effek jQuery biasa, dan menurut saya ini lebih simple karena hanya menambahkan sedikit kode CSS saja tanpa harus ribet berkutat dengan script. Dan kelebihan lain karena menggunakan CSS maka otomatis seluruh gambar pada postingan manapun akan menghasilkan zoom effect secara otomatis. Jadi kita tidak perlu menyisipkan kode apapun pada postingan :D

Bagaimana? Berminat? . Untuk demonya bisa melihat semua postingan di blog ini yang terdapat gambar. Atau bisa coba arahkan cursor ke gambar di bawah ini :

Bagaimana? Menarik bukan? . Jika kamu tertarik langsung saja ikuti langkah simple berikut ini untuk menerapkannya pada blog blogspot kamu :

•  Masuk ke EDIT HTML .
• Tambahkan kode CSS berikut Tepat Diatas 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: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

Lihat angka bold Biru di atas, itu adalah ukuran zoom efek yg akan di hasilkan. Silahkan edit sesuai dengan keinginan kamu. Biasanya CSS .post img sudah terdapat pada template blogspot, Jadi tinggal di sesuaikan saja kodenya.

Selesai, sekarang Efek Zoom pada gambar di postingan sudah dapat di nikmati :D , Dan tentunya tampilan image pada postingan kamu sudah lebih menarik ;) .

CATATAN :  Cara ini tidak hanya untuk blogspot. Cukup modifikasi CSS nya dan terapkan di page kamu yg lain.

Ok, semoga dapat di mengerti dan berguna.

Posted in: Blogging