Labels: Basic, Blog Design
.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>
16 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
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
Scrum master
Post a Comment