TUTORIAL EFEK ZOOM PADA GAMBAR JIKA DISENTUH KURSOR

Hallo... berjumpa lagi dengan saya. Kali ini saya akan memposting tentang......

TUTORIAL EFEK ZOOM PADA GAMBAR JIKA DISENTUH KURSOR

    Tahukan, kadang kalau kita klik gambar pada sebuah postingnya, maka gambar tersebut akan menjadi besar. Nah, berikut caranya ngebuat yang kayak gitu..

Langkah-langkah :

1. Seperti biasa, buka blogger kamu
2. Klik Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"
3. Tekan CTRL + F untuk mencari kode ini,
              
           ]]></b:skin>

4. Copy paste kode dibawah ini, dan letakkan di sebelum kode ]]></b:skin>

       .post img {

filter:alpha(opacity=60); /* Internet Explorer */

opacity:0.6; /* standard CSS3 */

-o-transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

}

.post img:hover {

-o-transition: all 0.3s;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

-moz-transform: scale(1.3);

-o-transform: scale(1.3);

-webkit-transform: scale(1.3);

}

5. Klik Preview, jika udah cocok n ga eror, klik save.

6. SELESAI....

Contoh setelah kode tadi dimasukkan..

.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}
  

]]></b:skin>

SELAMAT MENCOBA..

cc : http://jombinabelog.blogspot.com/2011/12/cara-buat-efek-zoom-pada-image-dalam_15.html