Skip to content Skip to sidebar Skip to footer

Cara membuat gambar di posting membesar hover

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.


1 comment for "Cara membuat gambar di posting membesar hover"

  1. Isin copy kode cssnya untuk pasang di log saya.
    Thanks sudah berbagi informasi mengenai cara membuat gambar di posting blog

    ReplyDelete