Tutorial "Hover The Image"

Sunday, July 1,14:35 | 4 notes

Atas permintaan readers di emel dan cbox, hari nie eyra nak share kan cara untuk macam mana buat hover the img tu. *lihat sidebar eyra* ..eyra tak tahu lah korang faham atau tak sebab kene edit-edit sikit untuk size gambar tu..

Dashboard > Design > Edit HTML

1. Cari kod :  /* Header
2. Pastekan 3 kod yang eyra bagi nie DI ATAS kod kita cari tu.. :

#rara{
background-image: url('URL GAMBAR');
width:246px;
height:160px;
}
#raraa {
background: #fffff;
width:246px;
height:167;
padding-top:38px;
padding-bottom:38px;
opacity:0.00;
-webkit-transition:1300ms;
}
#raraa:hover {
opacity:0.95;
-webkit-transition:1300ms;
}
Kemudian preview dulu,baru save..ikut step nie pula :

Dashboard > Design > Add HTML

1. Coy paste kod eyra bagi nie :

<div id="rara">
<div id="raraa">
<center>AYAT ANDA</center></div>

Take Note :
MERAH : boleh tukar warna background.. klik [ SINI ]
HIJAU : tukar la pape pun ayat korang nak letak..
PURPLE : tukar url image korang *makesure width dan height*.... eyra sediakan img utk hover.. klik [ SINI ] untuk dapatkan url gambar..

fuhhh..faham ke tak agaknya..haha..kalau tak faham,boleh bertanya ok??
klik [ SINI ] dan [ SINI ] please ?? terima kasih :)

4 ringankan tangan untuk menaip:

Revciless Rain said...

adik faham apa yg akak taip. tpi, adik pnya classic template.. adik spend msa 3jam utk skodeng2 code tue.. msih xberjaya xDD hahaha

Unknown said...

@Revciless Rain adik guna classic template eh?? haha..bole je dik,akk pn guna classic template kat blog lagi satu...adik kene pandai letak kod yg akk bg nie.. tp kod yg akk suruh cari tu,memang tk de dlm classic template

Revciless Rain said...

@Eyra Syahira ohh ... haa ! mcm mne akak ? xD *LOL

Revciless Rain said...

akak, adik dah berjaya buat hover the image tue dlm classic template :D
tq sbab beri tunjuk ajar..