HOMEPAGE
THE AUTHOR
FREEBIES
TUTORIALS
DESIGN PROCESS
PORTFOLIO

Tutorial Sparkle Pada Image.

Assalamualaikum bloggers.

Today, aten nak buatkan tutorial sparkle pada image.
Cuba hover kat header aten? Ada macam sparkle kan? K itu yang aten nak ajar harini.
Act, ada yang request tutorial ni haritu. Tapi, lupa siapa sebab dah lama.

TEKAN GAMBAR UNTUK LEBIH JELAS.


  • Pengguna classic template letak code yang aten nak bagi ni kat atas code </style> 
  • Pengguna template designer letak code yang aten nak bagi ni kat atas code /* Header


Pengguna classic template 

1. Dashboard > Template

Pengguna template designer 

1. Dashboard > Design > Edit html

2. Lepastu, cari code yang aten bagi mula-mula sekali.

3. Copy code bawah ni dan paste kat atas code yang korang search tadi tu.


img{
cursor:vertical-text;
opacity:1.0;
}
img:hover{
background: url(http://a.deviantart.net/avatars/s/p/sparklesplz.gif?1);
opacity:1.0;
cursor:vertical-text;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}

4. Save.

Nota kaki :

  • Sparkle ni takkan nampak pada image yang ada kat body blog kita. sebab body blog kita warna putih. Kalau kat header dia nampak, sebab header kita terletak pada background yang bermacam color. Mohon faham.
Segala pertanyaan, boleh tanya di komen :)

17 comments:

Terima kasih atas komen yang diberikan. Jangan lupa datang lagi untuk cerita yang terbaru. Salam sayang dari owner blog

 
Thankyou for visiting | Template made by Fatin Hazwani.