Cuppylicious

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

Khamis, 17 Mei 2012 | 12:40 PG | 0 budak suka cupcake + pink

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! :)

Annyeonghaseyo earthlings~ I am an alien. Follow this blog yaw! So, you can always visit my tutorial~

Edited : Amirra Najihah
Photo : We♥It
Tutorial : Jom Bina Belog
Best Viewed : Google Chrome