Memberi Efek Gambar pada Posting

Agar gambar yang kita posting terlihat lebih atraktif, kita coba menganimasikannya dengan menambahkan kode di bawah. Silahkan masuk ke pengaturan Template - Edit HTML (Exceed) - Expand Widget Template (letakkan sebelum kode: ]]></b:skin>).

.post img {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

Kita juga bisa mengatur arah serta tingkat kemiringan gambar, dengan cara merubah kode: (+2deg) dan (-1deg). Coba anda tukar balik tanda (+) dengan (-) atau angka (2) dan (1) bagaimana hasilnya...

Posted by Zuhry D'Explorer