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

Tutorial: Rounded Image Hover Effect

Saturday, June 11, 2011 - 0 comment

Hello.

This tutorial made special for Erin.

As the title, yad nak kongsikan macam mana nak buat rounded image hover effect ni. Srsly, panjang bebenor ye tak? Apa benda tu? Basically, hover effect adalah apabila cursor kita diletakkan pada sesuatu gambar, nanti gambar tu akan berubah mengikut effects tertentu. Hari ini, yad nak kongsi macam mana nak buat hover rounded image.

Lets start

Untuk Classic Template

1 - Dashboard > Design > Edit HTML

2 - Guna fungsi ctrl + f dan cari code dibawah;

img {

3 - Pastekan code dibawah disebelah code tadi

-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FA58AC; -moz-box-shadow: 0px 0px 20px #FA58AC; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}

Hijau; Warna. Boleh rujuk disini.
Pink; Border. Rujuk disini.

Then, anda boleh juga edit apa-apa yang anda mahu mengikut kreativiti masing-masing.

4 - Paste code di atas, sebelah code img { tadi.

5 - Save & done.

Untuk Template Designer

1 - Dashboard > Design > Template Designer > Advanced > Add CSS

2 - Copy semua code dibawah;

a img {-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FA58AC; -moz-box-shadow: 0px 0px 20px #FA58AC; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}

Labels: Tutorial