Tutorial : Effect Lengkung Pada Gambar

Assalamualaikum :) Entry kali ini Ajmal nak share macam mana nak buat effect lengkung apabila cursor dilalukan pada gambar. Kalau nak tengok contoh, cuba lalukan cursor pada gambar di bawah.

Langkah 1:

Dashboard - Designs - Edit HTML

Langkah 2:

Tick "Expand Widget Template" untuk memudahkan pencarian

Langkah 3:

Tekan F3 atau Ctrl+F.

Langkah 4:

Cari kod di bawah.

/* Header

Langkah 5:

Copy kod di bawah dan paste di atas kod yang di cari tadi.

/*------ 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:10;

-webkit-border-top-left-radius:10;

-webkit-border-bottom-right-radius:10;

-webkit-border-bottom-left-radius:10;

}

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;
}

Then, Preview dan save jer, ok!