efek gambar melengkung / image hover effect

Dah dua hari tak jalan- jalan kat blog orang dan dah beberapa hari jugaklah tak update belog ni,kuikuikui. Still, masih jugak ada yang sudi singgah, trimas diucapkan. So, hari ni nak update sikit. Nak kongsi satu lagi tuto menarik. Tak rugi mencuba, ye dak?

Tengok,  Baca tajuk ni pun dah tahu kan pasal apa yang nak dikongsikan tu. Contoh tajuk tu macam gambar kat bawah ni lah.

sebelum

selepas


( menggunakan gambar yang sama, malas nak buat gambar baru T.T )

Haa.. itulah yang dimaksudkan dalam tajuk tadi. Kalau korang halakan cursor kat mana- mana gambar dalam blog ( jangan  nak ngada- ngada hala sini sana cursor tu kat belog aku, aku xpakai code ni, harap mahap =,= ) , gambar tu akan menjadi melengkung. 

Kenapa aku tak pakai kat dalam belog ni sebab kalau halakan cursor kat header aku, nampak tak cantik. Kang terserlah semua kecacatan ' beliau' , ewahhhhh. Tapi untuk korang takpe, hehe. Akey, cara untuk buat ni simple je. Macam korang tidur pastu bergolek golek * tak ada kaitan* .

First, korang pergi..

dashboard - design- edit html -tick expand widget

pastu klik f3 dan cari code ni.

a img

copy code ni dan paste kat bawah atau sebelah code a img tu.

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

Yang pink tu korang bolehlah tukar dengan warna yang korang suka. Yang hijau tu pulak garis- garis kat border korang. Korang boleh tukar kepada dotted, solid, double atau inset.

Selamat mencuba ^^