Cara Membuat Efek Getar dan Bayangan Pada Gambar Postingan

Cara Membuat efek Getar dan Bayangan pada Gambar Postingan - Memasukkan gambar di postingan blog adalah bagian paling penting yang harus dipahami oleh semua blogger, apalagi untuk seorang blogger pemula.

Pada kesempatan kali ini saya ingin berbagi Tutorial Cara Membuat efek Getar dan Bayangan pada Gambar Postingan. Sebenarnya style original nya bagus, namun apabila di modifikasi pasti lebih unik dan menarik. Langsung saja ke Tutorial nya.

Cara Membuat Efek Getar dan Bayangan Pada Gambar Postingan

1. Pertama buka Tema dan Edit HTML.
2. Tekan Ctrl + F lalu copy kode CSS dibawah ini diatas ]]></b:skin>dan tekan simpan tema.

.post-body a img{box-shadow: 0px 0x 6px rgba(0, 0, 0, 0, 5);
border-radius:10px;}
.post-body a img:hover{
animation:ignielShake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform:translate3d(0, 0, 0);
backface-visibility:hidden;
perspective:1000px}
@keyframes ignielShake{
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px, 0, 0)}}
@-webkit-keyframes ignielShake{
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px,0,0)}}

3. Hasil nya akan seperti ini:

See the Pen QWwGaYB by Anoy Tampan (@AnoyTampan) on CodePen.

Jadi seperti itu Cara Membuat Efek Getar dan Bayangan Pada Gambar Postingan.