Membuat efek gambar hover shadow

Untuk membuat efek gambar hover shadow aku akan menuliskan tutorialnya, kalau gambar disentuh cursor akan ada hover shadownya dan warnanya juga bisa diubah, caranya:

1.Dashboard > Template >edit HTML

2.Expand Template Widget dan tick F3 atau CTRL + F dan cari kode

 /*  Header

3.Letakkan kode di bawah ini tepat di atas kode tadi:

img {filter:alpha(opacity=100);
-webkit-transition-duration:3.5s;} img:hover {filter: alpha(opacity=70); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF44FF; -moz-box-shadow: 0px 0px 20px #FF44FF; -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=70); opacity: .70; border: 1px solid #FF44FF; 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;
}

Yang aku tandai warna pink adalah kode warnya nya dan bisa diubah sendiri menurut warna kesukaan, setelah itu tekan pratinjau dulu baru simpan template.

Share :