Auto Zoom Image dengan CSS

July 21, 2012

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihWtdnLdQeyKIFRXCcEqzHzSFukPGf9CyecNUZ1rqbyO6_dC4ZPH4bnhe2rDBmxUyztBsKxN5VTjG3vlbJaC39LrdZtU2xbK70AzRq8Nokrrb81sVoqkO5gel8Og1bPeIey5B_NgPkaI/s1600/flying+dutchman.png" /></div>

Labels: Basic, Blog Design

18 Komentar:

Unknown said on August 4, 2012 at 10:55 PM

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

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

mampir untuk membantu meramaikan blog ini ^_^

#Salam sukses dari Yousake NKRI

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

makasi om... mau praktikin dulu..

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.

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

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.

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

siippp...yang kucari slama ini
nice

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

Uoptutorial 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

Unknown 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);

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

maksih bang

Karthik said on March 23, 2019 at 1:44 PM

Its really an Excellent post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog. Thanks for sharing....

Invisible Teeth Braces
Laser Gum Treatment
Book An Appointment

Daily Image Funda said on February 14, 2020 at 1:16 PM

Daily Image Funda is one of the best image provider, We provide all the images like Good Morning, Good Night and many more

Visit the website for more info:

Happy Birthday Images

Sahil said on September 25, 2021 at 4:28 PM

We here at Dental Direkt India Provide Best Zirconia Crowns in india With Warranty

sri said on January 12, 2022 at 2:01 PM

Thanks for sharing this.,
Leanpitch provides online training in Scrum Master, everyone can use it wisely.
Join Leanpitch 2 Days CSM Certification Workshop in different cities.

certified scrum master certification
agile scrum master certification

sri said on January 12, 2022 at 2:03 PM

sri said on January 12, 2022 at 2:09 PM

koderator

Auto Zoom Image dengan CSS

July 21, 2012

18 Komentar:

Post a Comment