Auto Zoom Image dengan CSS membuat gambar memperbesar secara otomatis ketika dilalui oleh crusor. Tutorial ini adalah bagian kedua dari tutorial sebelumnya yaitu Membuat Efek Zoom Pada Gambar Dengan jQuery bagian ini lebih simpel dari yang sebelumnya dan tanpa script jQuery namun dalam penerapannya harus manual.


Previewnya dapat dilihat pada gambar diatas.
Penerapannya pada blog kita ataupun dalam postingan dapat dilihat dibawah ini:
CSS
.zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
.zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}


Penerapannya:
Gunakan HTML dibawah ini untuk memanggil CSS diatas
HTML
<div class="zoom">
<img src="URL GAMBAR SOBAT" /></div>




Contoh

<div class="zoom">
<img src="http://3.bp.blogspot.com/-3wGZ20MzWxE/UAq8YK4SAII/AAAAAAAAAdo/QEu74rJq78w/s1600/flying+dutchman.png" /></div>

Labels: ,

13 Komentar:

Blogger Denddy Gustiana said on August 4, 2012 at 10:55 PM 

asik keren... kalau animasinya zoom berputar gimana om...

Anonymous Yousake NKRI said on November 3, 2012 at 11:57 AM 

mampir untuk membantu meramaikan blog ini ^_^

#Salam sukses dari Yousake NKRI

Anonymous Widyas Private Pool Villa Bali said on December 7, 2012 at 10:11 AM 

makasi om... mau praktikin dulu..

Anonymous Tips Trik Blog said on December 7, 2012 at 10:14 AM 

selamat pagi, abang mau tanya ni... kalau di website dengan code html bagaimana caranya ya membuat gambar yang ada di website tersebut bisa zoom saat diklik (bukan blogspot)? terimakasih bantuannya.

Anonymous Aplikasi Android Premium said on January 29, 2013 at 10:11 AM 

Makasih banyak om atas tutornya... ane tertarik untuk nyoba di blog http://analisisringan.blogspot.com

Anonymous Leo Ari Wibowo said on February 1, 2013 at 9:10 AM 

Cari-cari cara, akhirnya ketemu di blog om. Sukses saya praktekkan ke theme saya om http://themes.majuter.us

Makasih.

Anonymous aldi said on March 28, 2013 at 2:04 PM 

siippp...yang kucari slama ini
nice

Anonymous Anonymous said on July 28, 2013 at 2:11 PM 

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!
Situs SAYA
Situs SAYA
Situs SAYA
Situs SAYA
Situs SAYA
Situs SAYA
Situs SAYA

Anonymous AHS said on July 28, 2013 at 2:14 PM 

@Anonymous wah parah lu anonim -_-
hapus itu bang admin,, jangan lupa mampir ya bang :v

Blogger HRM 531 Week 1 said on September 6, 2013 at 3:15 PM 

This is very useful post for me and it helps me a lot. Thank you so much for this and have a great time.. by HRM 531 Week 3

Blogger Risnandi Anggara said on March 14, 2014 at 9:18 AM 

@Denddy Gustiana

#profile img{
float: left;
width: 50%;
height: auto;
-webkit-transition:width 2s, height 2s, -webkit-transform 3s; /* For Safari 3.1 to 6.0 */
transition:width 2s, height 2s, transform 3s;

}
#profile img:hover{
width:200px;
height:165px;
-webkit-transform:rotate(1800deg); /* Safari */
transform:rotate(1800deg);

Blogger Arzi said on March 24, 2014 at 8:26 PM 

maksih bang

Blogger Rekhila said on July 29, 2016 at 2:24 PM 

This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.
Branding Services in Chennai

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger