Image Animation Hover

Annyeonghaseyo...
today rajin pula nak buat tuto ni..

tak tau ape tuh image hover ? cube letak cursor dekat gambar , dia akan jadi terang sikit ..
tapi yaya tak buat la..korang paham2lah sendiri okayy.. sebenarnya dia mcm bila cursor tunjuk kat gambar, gambar tu jadi terang, haa... tau kan??? huu..


1. Pegi Dashboard > Design > Edit Html
2. Tekan ctrl+f cari kod.. btw, sebelum tu tekan expand widget dulu okay.. jgn lupa tuhh

/* Header 

3. kalau nak buat hover yang boleh lengkukkan image ambil code ni : 

/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;} 

*kod warna merah boleh tukar color shaded dia .

Kalau tak nak lengkukkan image tetapi nak terangkan sahaja ambil code ni :

/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}  

okay.. dah siap... kalau jadi, bgtau  yaya tau... 

SELAMAT MENCUBA =) 

thanks for readings!

No comments:

Post a Comment

hey2! comment here....