Cara Membuat Efek Hover Pada Gambar Di Blogger

Assalamualaikum, Bertemu lagi kita di posting Cara Membuat Efek Hover Pada Gambar Di Blogger, Kali ini sya akan terangkan cara membuat efek hover pada gambar tertentu di blogger sepertimana yang anda lihat di blog ini.

Tips css hover yang saya akan kongsikan ini tidak memerlukan apa apa javacript, Ataupun lain kata bebas dari javascript dan 100% hanya menggunkaan css.

Bagai mana cara untuk memasangnya?

Login ke blogger anda Theme > HTML Editor Dan masukan css style berikut ke dalam css style blogger anda.

.myclass img.myimage:hover{animation:bergetar 0.8s;animation-iteration-count:1}
@keyframes bergetar{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}}

Dan code Html untuk menampilkan image seperti berikut

<div class='myclass'>
<img alt='TITLE GAMBAR' class='myimage' src='URL GAMBAR ANDA'/>
</div>

Selain itu code ini juga boleh di pasang di semua gambar yang ada d blogger kita, Dengan cara memasang css code berikut

img:hover{animation:bergetar 0.8s;animation-iteration-count:1}
@keyframes bergetar{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}}

Tetapi saya rekomenkan untuk hanya memasang di tempat tempat tertentu, seperti di posting ataupun di hompage, Apa apa pun dari kita saja bha tuu. Baiklah sampai di sini sahaja posting saya tentang Cara Membuat Efek Hover Pada Gambar Di Blogger, Sekiranya ada pertanyaan silakan tinggalkan comment and a di ruangan yang disediakan. Wasalam