[Tutorial] Macam Mana Nak Besarkan Gambar Bila Cursor Menyentuh Gambar Tersebut?

Wednesday, November 02, 2011


Assalamualaikum


Nak kasi tutor yang di request oleh DIBA yang comel loteyy nie :)


Macam mana nak kasi gambar korang jadi besar bila cursor menyentuh gambar tu dan sekaligus gambar tu jadi blurr? Atau dalam bahasa pendeknya Tutorial Hover Zoom Smooth Picture. Hehe :)


Credit to Amalina Land! :D


Faham tak? Ok contohnya, cuba korang halakan cursor korang kat gambar di bawah nie

Gambar Dinner kitorang :)
Credit picture to El Ferdowsi


See? Gambar tu jadi besar dan blurr kan? So aku nak kasi tutorial dekat korang lah nie :)


  • Dashboard > Design > Edit HTML
  • Tekan ctrl + f dan cari code kat bawah ini
<head>
  • Copy code di bawah ini dan pastekan di BAWAH code yang korang tadi
<style>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2); }
Sumber : http://farixsantips.blogspot.com/2011/06/effect-hover-zoom-smooth-pada-object.html#ixzz1X07HXoVg
</style>
  • Sebelum save, preview lah dulu ye? Kalau tak ada error, save je terusssssss! :D
  • Dah siap! :D


Dah menjadi, bagitahu ehh? :)



More tutorial HERE!

You Might Also Like

7 comments