Tutorial : Image Hover (Image Melengkung)


Assalamualaikum and annyeonghaseyo. Hai . Dah lama tieqa tak hupdate. Nampak sangat blog ni dah berhabuk + bersarang. Okay la, tuto kali ni direquest oleh adik Anisa . Dia tanya macam mana nak buat gambar melengkung bila cursor menyentuh. Oh btw bagi yang ada request dekat formspring, kalau tieqa tak buat tuto yang korang request tu, bermakna tieqa dah pernah buat tutonya sebelum ni. Okay lah, jom start.

Tuto ni hanya untuk pengguna Template Designer sahaja
1. Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2. Press Ctrl + f serentak dan cari code
/* Header
----------------------------------------------- */
3. Kemudian, copy code dekat bawah ni
 img {
border-radius:10px;
opacity:0.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:30px;
opacity:10.8;
-webkit-transition-duration:2.5s;
}
4. Paste di bawah code tadi
5. Preview & save

Untuk template classic boleh rujuk dekat SINI

6 comment [s]:

BigBang Super Junior said...

Akak mcm mne nak copy code tu adek xtau nk buat mcm mne...

Nurul AtiQah said...

@BigBang Super Junior : Tekan Ctrl+c untuk copy :)

Atin Tory said...

unnie pinjab tuto ni k gomawo ^^

Nurul Anisah said...

Dah jadi.Thanks for the tutorial :)

Marha Amni said...

Thanksssss

Marha Amni said...

thankss