Cara buat efek zoom pada image dalam post - Efek 2 (opacity image) - Hallo sahabat Cara Sign Up, Pada Artikel yang anda baca kali ini dengan judul Cara buat efek zoom pada image dalam post - Efek 2 (opacity image), kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Cara buat efek zoom pada image dalam post - Efek 2 (opacity image), yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)
link : Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Lihat preview di bawah:

Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:

1) Sign in akaun blogger anda

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

]]></b:skin>

4) Copy paste kod di bawah sebelum kod ]]></b:skin> yang anda cari dalam langkah 3 tadi

.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);
}

Contoh, rupa kod anda akan kelihatan seperti ini:

.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>

5) Akhir sekali, klik Preview dan jika tiada error, klik Save.

Selamat mencuba! :)

Demikianlah Artikel Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Sekianlah artikel Cara buat efek zoom pada image dalam post - Efek 2 (opacity image) kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara buat efek zoom pada image dalam post - Efek 2 (opacity image) dengan alamat link http://carasignup.blogspot.com/2011/12/cara-buat-efek-zoom-pada-image-dalam_15.html

Tweet