Efek Membesar pada gambar postingan

www.aziscs1.com - Kali ini saya akan berbagi tips untuk Para Blogger yang ingin Blognya terlihat lebih keren dan unik dengan efek Membesar pada gambar postingan. Efek Membesar pada gambar postingan maksudnya adalah apabila Corsur kita taruh tepat di atas gambar maka gambar tersebut otomatis akan membesar, Seperti terlihat pada gambar di bawah ini .


saya akan membahas gimana cara buat effect gambar seperti di zoom..dalam hal ini Kita cuma tambahkan sedikit modifikasi di CSS.

Ok langsung saja saya akan berikan caranya :

1. Login ke Blogger
2. Pilih menu Tataletak lalu pilih edit HTML
3. Cari kode berikut dengan Ctrl+F masukkan ]]></b:skin>
4. Lalu paste kode dibawah ini, persis di atas ]]></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 yg warna BIRU,itu adalah kuran Effect zoom yg akan di tampilkan. silahkan Sobat aziscs1 edit dan sesuaikan dengan selera masing-masing. Setelah Selesai Lalu SAVE. Dan Selesai effect zoom gambar pada postingan sudah kamu bisa nikmati.

Tweet

Azis Grafis

Assalamualaikum, “Saya merupakan seorang yang sangat tertarik dengan dunia Desain Grafis, Fotografi, Komputer dan Blogger. Oleh Karena itu saya sangat senang Sekali mempraktekkan dan berbagi apa yang sudah saya ketahui dan miliki kepada orang lain, sehingga menjadi sangat bermanfaat bagi saya sendiri maupun orang lain.”

Subscribe to receive free email updates: