Efek zoom pada gambar postingan

Sudah lama gk update blog ini,,,karena ada urusan di dunia nyata gk gk bisa gw tinggalin .. :D
okeh sekarang saya akan membahas gimana cara buat effect gambar seperti di zoom..dalam hal ini cuma di tambahkan sedikit modifikasi di CSS..
CONTOH

gimana OK kan..nah selebihnya secara otomatis gambar yg muncul di setiap postingan akan seperti ini juga tampilannya,jadi kamu gk perlu repot2 memasukan code lagi..

langsung aja yah ke kodenya,kyanya udah pada gk sabaran .. :D

• Tambahkan kode CSS berikut pada HTML kamu :

.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 yg warna BIRU,itu adalah kuran Effect zoom yg akan di tampilkan.silahkan kamu edit dan sesuaikan dengan selera masing-masing..
Selesai effect zoom gambar pada postingan sudah kamu bisa nikmati..

• Biasanya CSS .post img sudah terdapat pada template blogspot, Jadi tinggal di sesuaikan saja kodenya.
• Dan cara ini juga bisa di gunakan di blog selain blogspot,tinggal kamu edit CSS nya aja .

Artikel Terkait