TUTORIAL IMAGE HOVER SHADOW

Assalammualaikum...
Hari nie Princess nak buat tutorial lagi. Tutorial nie pown Princess buat sebab Princess nak buang tapi sayangkan takut satu hari nanti Princess nak buat lagi dah tak ada tutorial nie. So, Princess pun buatlah Tutorial lagi kali ini adalah image hover shadow. 


Maksudnya adalah apabila kita cursor arrow tu di mana2 gambar dalam blog dia akan ada shadow ikut warna yang kita dah tentukan. So, sesipa yang berminta jom belajar!!

Mula-mula buka DASHBOARD > DESIGN >EDIT HTML >TICK EXPAND WIDGET

Cari code ini: Cara senang nak cari tekan serentak CTRL+F
]]></b:skin>


Selepas itu, masukkan code di bawah ini sebelum code di atas tadi:

/*Image animation
-----------------------------------------------*/
img {
filter: alpha(opacity=90);
opacity: 1.2;
-webkit-transition-duration:.5s;
}
img:hover {
filter:alpha(opacity=100);
-webkit-box-shadow: 0px 0px 20px  #157DEC;
-moz-box-shadow: 0px 0px 40px  #157DEC;
-webkit-border-top-right-radius:30;
-webkit-border-top-left-radius:30;
-webkit-border-bottom-right-radius:30;
-webkit-border-bottom-left-radius:30;
}
img:hover {
filter:alpha(opacity=100);
opacity:1.0;
border: 2px dotted #2B60DE;
border-radius: 50px;
-moz-border-radius: 50px;
}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {filter: alpha(opacity=60);
opacity: .60;
-moz-opacity:0.80;
}
u {
text-decoration:underline;
border-bottom: 2px dotted #2B60DE;
padding: 0px;
}


Info:
Yang berwarna Pink korang boleh tukar warna kesukaan korang DI SINI.
Yang berwarna Merah korang boleh tukar sama ada (dotted/solid/dashed/ridge).
Yang berwarna Ungu korang boleh tukar saiz berapa korang nak laa ok.

okey itu sahaja...peringatan sebelum SAVE, pastikan korang PREVIEW dulu. Sekiranya tiada ERROR, barulah korang boleh SAVE okey!!
Sekian wassalam
pen~off

6 Comments:

♥ aeryn ♥ said...

tq princess... cantik btol blog awak.. tringin sgt ader blog cntik macam awk..

❤‌Princess Nabilah ❤‌ said...

@♥ aeryn ♥

thanks ya...
blh awk blaja2 laa dr mne2 blog tutorial yer

Aisyah Abdullah said...

cantek la blog adik neyh....jeles la...huhuhu

❤‌Princess Nabilah ❤‌ said...

@Aisyah Abdullah

bese2 je la kak hehehe

Dax ucuxx said...

thanx dear.. :)

❤‌Princess Nabilah ❤‌ said...

@Dax ucuxx

sme2

 

Copyright by © 2013 Studio Puteri Nabilah