Round Hover With Shadow

Annyeonghaseyo..

tuto ni dipertanyakan oleh seseorg. so, yaya nak bgtau dia mcm mane nak buat Round Hover Shadow tu.
korang tau tak round hoover shadow tu mcm mne? haa..dia mcm ni : bila korang sentuh je kat mne2 gambar, gambar tu akan ade satu border bulat tau.haa.. dah tau? okay.. ni cara dia..

1. Log in > Dashboard > Design > Edit Html > Tick Expand Widget Templates

2. Tekan F3 atau Ctrl+F search kod kat bawah ini :

/* Header 

3. dah jumpa? pandai.. okey. next step,paste kod ini pula kat ATAS kod yg korang cari tadi tu ok  !~

/*------ 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 #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -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#FF3366; 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;
}

**tukar kaler biru tu dengan kaler yg korang suka okay? cari kaler yg korang suka kat SINI
okay. sebelum save, preview dulu taw.. ok dah jadi? SAVE

selamat mencuba =)
thanks for readings!

4 comments:

  1. Mcm mne nk copy code tuh ... klu nk copy , nnt tercopy dgn yg len ... Nk wat mcm mne erk ???

    ReplyDelete
  2. @Rabiatul Adawiyah
    copy jer mcm biasa okay. highlight code tu, then, tekan ctrl+c. :)

    ReplyDelete

hey2! comment here....