Cara Membuat Efek Hover Pada Gambar Di Blogger - Onet4u Tech
Dark
News Update
Loading...

Cara Membuat Efek Hover Pada Gambar Di Blogger

Cara Membuat Efek Hover Pada Gambar Di Blogger
Also Read
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.
Cara Membuat Efek Hover Pada Gambar Di Blogger
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
DONATION Help give donations if the article feels useful. Donations will be used to extend the www.onet4u.com. domain. thanks.

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel