t u t o r i a l s i t e

Tutorial: Rounded Image Hover Effect#2

Sunday, June 12, 2011 - 0 comment

SaLam..!! xDD

Hari ni nak try buat lagi 1 tutorial Rounded Image Hover Effect ni. Erin tak jadi. Ok, ikut step ni. :]
Sorry Erin. grr !

Step 1 - Dashboard>Design>Edit HTML

Step 2 - Gunekan function CTRL + F and cari code dibawah

a img {

Step 3 - Copy semua code dibawah then paste dekat bawah code tadi.

-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 40px #bebaba; -moz-box-shadow: 0px 0px 40px#bebaba;-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: 0px dashed #000000; border-radius:40px; -moz-border-radius: 40px;}

biru :kelebaran shadow

purple :warna shadow

orange : warna border gambar

hijau :kelengkungan border

kuning : ketebalan border gambar

Then save je.

So, kalau tak jadi cakap ok?

Labels: Tutorial