Cara Buat Efek/Effect Senget Bila Hover Link & Gambar/Image

بسم الله الرحمن الرحيم

sumber : catasters

Assalamualaikum korang semua.Harini nak ajar buat efek/effect senget bila kita hover link atau gambar (sila letak cursor atas meoww atas ni).Efek senget ni dah banyak blogger popular buat macam Ailyl,Ryna,Yiyin.Heheh.So,bile dorang buat,hati aku pon membuak-buak nak buat jugak.Aku cari dan banyak jumpa yang buat efek senget untuk blockquote.Sebenarnya boleh je guna kod itu untuk image dan link.Korang kena ubah sikit je :)

Hover Senget Untuk Link (Sila backup template dulu)

1. Design --> Edit HTML --> Cari (CTRL+F) kod a:hover {

2.Kemudian korang copy paste kod panjang bawah ni di antara a:hover { CODE }

transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

3. Kemudian masukkan kod panjang bawah ni di antara a:link { CODE }.CTRL+F a:link {

transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

Okey,untuk hover link ni,semua link termasuk gambar berlink dan header akan senget sekali.Kalau nak link sahaja,minta maap la,teman xtau.Sebab tu teman buat hover senget kat gambar entri sahaja.

Hover Senget untuk Gambar/Image (sila backup template dahulu)
1. Pergi Design --> Edit HTML --> Cari (CTRL+F) ]]></b:skin>
2. Kemudian copy paste kod panjang bawah ni DIATAS kod ]]></b:skin>

.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

3.Preview.Save.

UPDATE!!Untuk template lain dari aku :(Sila backup template anda dahulu)
Kalau template blog korang ada kod img{} & img:hover{} lagi senang sebab korang copy paste je kod efek senget dalam { } itu.Contoh.Korang CTRL+F img{ dan paste kod ini seperti dibawah.

img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}

Untuk hover,CTRL+F img:hover{  

 img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

Untuk hover image,kod ni untuk hover senget kat semua gambar di post/entri korang sahaja.Kalau nak buat untuk gambar sahaja better guna cara kedua ini.

♛Untuk menambah baik lagi,korang boleh la main-main tukar 5deg,7deg tu.Itu untuk berapa degree dia senget.Kalau letak 180deg mau berputar terus kan -,- (okey,aku dah try,memg gambar kau berputar alam tau tak.HAHA).Rotate,you know rotate?

♛Peringatan! Aku tak pasti la kalau korang bukak blog aku guna Chrome nampak okey tak gambar aku berputar.Tapi kalau pakai Mozilla Firefox InsyaAllah menjadi kod ni.Serius,blog aku nampak hodoh kat Google Chrome.Tak caya,pegi tengok sendiri.Blockquote,comment box & sidebar blog aku memang tak menjadi. So,sapa yang nak blog dia nampak cantik di kedua-dua mozilla & chrome,aku akan mengecawakan korang je dengan tutorial aku ini.Cewaah.

♛Sumber pertama : Faqihah (blockquote senget) Versi pertama aku pakai sebelum jumpa sumber kedua.

♛Sumber kedua : SyafaLunia (tapi tutorial itu sudah tiada,maybe ada hal musabab tutorial itu tiada -,-)BTW thanks!Versi kedua aku pakai sebelum jumpa yang ketiga.

♛Sumber ketiga : Ni kod yang update/terbaru aku pakai,yang aku ajar korang ni. Milik blog I N I.Blog ini ajar CSS3. Aku xhabis khatam lagi apa CSS3.Dalam blog ni banyak ajar transform,transition,border color,border image.Ni semua guna language(?) CSS3 yang baru.Pergila belajar buat benda lain kat sini.