Tutorial : Rounded Hover Image Effect

Follow c u t e s e c r e t s for more cute photos ♥

Huiihuii..korang buat pe tuh? tetibe rase rajin pulak nie nak menghupdate belog..story mory later ukeyh..nak share tutorial jep untuk korang..suke? tak suke? HAHA..wutever meh..worait,so kali nie nak buat tutorial besh punyer..Tutorial Rounded Image Hover Effect..yang camne tuh? korang pernah masuk sesetengah belog yang apply tutorial nieh,means kalao korang sentuh cursor dekat gambar..then jadi cam rounded effect tuh..ta paham?tengok gambar kat bawah nie ye...
 

1) Log In>> Dashboard>> Design>> Edit HTML
2) Tick Expand Widget Template
3) tekan "ctrl+F" dan cari code kat bawah nie kay

/* Header

4) Bila dh jumpe,then copy paste code kat bawah nie ATAS code tadi tau
/*------ 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;}
5) Tukar code yang dihiglight pink tu ekot warna kesukaan korang ye

6) SAVE,dah ciap dahh~~

Tiada ulasan:

Catat Ulasan