Cara membuat gambar di posting membesar hover

Dulu aku pernah menuliskan tentang cara membuat gambar membesar bila disentuh cursor. Dan sekarang aku akan menuliskan cara membuat gambar di posting membesar hover, artinya bukan termasuk gambar di sidebar, dll yang membesar tapi hanya gambar yang ada di posting, contohnya gak usah jauh-jauh tapi ada di blog aku ini xD. Ok deh, langsung aja aku tuliskan caranya, hanya perlu menambah kode di template.

Cara membuat gambar di posting membesar hover:

1.Masuk ke Dashboard/Dasbor > Template > edit HTML

2.Tick Expand template widget dan tekan F3/CTRL + F dan cari kode:

/* Header 

3.Letakkan kode berikut ini di atasnya:

.post img, table.tr-caption-container {
border:none;
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);border-radius:15px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

4.Tekan pratinjau dulu untuk mengetahui error atau gak, kalau semua ok baru simpan template, selamat mencoba.

Share :