Tutorial Gambar Timbul Berserta Border di Blogskin

 Cute-121_large
Hey hye there!! hai semua!!!! ok lah harini Diya nak ajar korang cara nak buat picture effect yang sangat best , ok korang try tengok gambar bawah ni

best kan?
 haaa bila kita halakan cursor dekat gambar tu dia akan nampak timbul.
1.Pergi >> Template

2.Serentak tekan ctrl + f dan cari kod  img:hover {
3.Ok kalau korang da jumpa kod  img:hover {  tu, kalau korang akan nampak simbol  
 kan dekat bawah dia. 
  

 4.Now korang copy kod bawah ni dan paste di bawah simbol  } ( macam step 3)

 /*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -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=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;} 
5.Preview and save !sengih
 

21 comments:

  1. hye diya...macam mana kita nak buat gambar mcm dalam blog diya nie....gambar kelabu jer huhu bila letak cursor baru jelas...dah lama cari tutor nie tp xder...kalau tak kisah kongsi la sekali diya...dalam blog diya xder pun tutor nie..thanks!

    ReplyDelete
  2. kak diya kalau tak de img:hover { nie macam mne?

    ReplyDelete
  3. akak , tak de kod tu la . acane ni ? trgn nk buad tuto ni .

    ReplyDelete
  4. Tak jumpa lah kod tuh :(

    ReplyDelete
  5. thank you. btw i kena copy balik semua benda kat atas tu sebab code dia memang tade. thank you sekali lagi.

    ReplyDelete
  6. hola. dah jadi dah jadi , terima kasih :)

    ReplyDelete
  7. Wuhuuuu~~~.. Jadik ! Thenky ya kk ! :D

    ReplyDelete

What do you think? Leave a comment :)