Tutorial : Rainbow Image Hover.

by - 10:11 PG



Assalamualaikum :)

Hari nie arrien nak buat tuto..Tuto nie macam kalau korang halakan cursor ke image dia akan ada hover raibow.. macam kat blog arrien sekarang nie :) cantik kan..hehe
But arrien rasa hover image nie hanya akan menjadi di google chrome,coz arrien dah cuba dekat mozile dia takde effect,so just untuk yg menggunakan google chorome jer oke..

1.Untuk template designe : tekan Ctrl+F dan cari code .img{ 
classic template/blogskin : Ctrl+F and fine code <style>

2. Copy code bawah nie:


img{

padding:4px;

-webkit-transition:1s;

}

img:hover{

-webkit-transition:1s;

-webkit-filter: hue-rotate(360deg);

-moz-filter: hue-rotate(360deg);

}

3. Template designe : Tukarkan (paste) dengan code .img{ yg korng cari di 1 tadi.
Classic/blogskin: pastekan di atas <style>

4. Preview and kalau menjadi save :)

good luck ^_-

Share
Tweet
Pin
Share
Tags : ,

You May Also Like

4 Comments

  1. Tanpa Nama2 Februari 2013 pada 8:52 PTG

    daa lama cari nii~! hee thankyou~ nk try laa.. >.<

    BalasPadam
  2. Arrien::@man!::2 Februari 2013 pada 8:59 PTG

    @Lissa LaLissau are welcome.. cuba lh.. klau tak mnjadi sila bg tahu yea :)

    BalasPadam
  3. Tanpa Nama11 Ogos 2013 pada 9:35 PTG

    kalau x jumpe code .img{ tu nk letak kt aner?

    BalasPadam
  4. Arrien::@man!::12 Ogos 2013 pada 2:45 PTG

    @nabuhah ishak urm..maybe awak boleh letak jer code tu atas code /* Header, coz sye pun tak pasti..sye punya,code .img{ tu ada.. ~~"

    BalasPadam

Thankz sudi baca entry arrien..
Jom ringan2 kan tangan anda untuk comment ^_^
Terima Kasih :D

No hard word..
Plezz..berbudi bahasa budaya kita kan ?? ^_-