Effect melengkung pada gambar (on cursor)

Masa Hani buat tutorial untuk effect transparent pada gambar, ada pulak yang minat nak tau macam mana nak buat hover eaffect (effect melengkung pada gambar). Since Hani ni takdelah jahat sangat, ni Hani nak share cara buat gambar tu jadi melengkung bila kena cursor. Enjoy! :)
Disebabkan Hani tak pakai code ni, anda kenalah buat sendiri untuk tengok hasilnya. Ingat! Backup dulu template anda. Kang menangis tak berlagu template jadi huduh...


Step : Dashboard >> Design >> Edit HTML >> Expand Widget Templates


Kemudian anda cari code ni >> a img{

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

Code warna biru tu korang boleh tukar dengan warna yang korang suka. Code kuning untuk jenis garis yang korang nak, boleh pilih samaada Dotted; Solid; Double; Inset; Dashed.

Last sekali barulah save. Tengok kat blog anda, jadi tak? :)

Untuk rujukan warna, klik sini.