Efek Gambar Zoom dan Berbayang dengan CSS

Dengan semakin berkembangnya cascading style sheet dan kompatibilitasnya dengan browser baru, desain blog dan website menjadi lebih kreatif.

Sobat mungkin pernah menggunakan Photoshop secara manual untuk menambahkan bayangan pada gambar, tapi sekarang berkat CSS3 Anda dapat menambahkan bayangan  untuk semua gambar sobat secara otomatis. Kita akan belajar bagaimana untuk memperkecil ukuran gambar besar dan bagaimana kita bisa membuat gambar tersebut zoom ke ukuran aslinya pada saat mouse diarahkan ke gambar. Semoga sobat akan menyukainya.

arahkan mouse ke gambar untuk zoom

Caranya cukup mudah;

1.     Masuk ke Blogger > Design > Edit HTML > centang Expland Template
2.     Back up  template sobat
3.     Cari kode ]]></b:skin>
4.     Sebelum kode ]]></b:skin> paste kan kode di bawah ini

.julak-css img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.julak-css img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Sekarang jika Anda ingin gambar muncul dengan efek ini, cukup menggunakan kode di bawah ini pada posting blog, menu HTML.

<div class="julak-css">
<img src="URL Gambar Masukkan di sini " />
</div>

Upload gambar Anda ke editor Blogger ganti URL Gambar Masukkan di sini dengan link gambar Anda. Lalu lihat blog Anda untuk melihatnya.

contoh penerapannya seperti ini

<div class="julak-css">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggDaBl-xGdnH8naUBGL-zl4YfOhK1EdvpxDF6iYcUQBx-3mUjCb781YN1NBBhXmkNY2gqQMai28XVwH8QnpknYu4Ouqr6cLcT5MiDQOkI1HL9NONfP8FRDgMTNXG3nQfVAoFXWIbKk7Q/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></div>

dan seperti ini

<div class="julak-css"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggDaBl-xGdnH8naUBGL-zl4YfOhK1EdvpxDF6iYcUQBx-3mUjCb781YN1NBBhXmkNY2gqQMai28XVwH8QnpknYu4Ouqr6cLcT5MiDQOkI1HL9NONfP8FRDgMTNXG3nQfVAoFXWIbKk7Q/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggDaBl-xGdnH8naUBGL-zl4YfOhK1EdvpxDF6iYcUQBx-3mUjCb781YN1NBBhXmkNY2gqQMai28XVwH8QnpknYu4Ouqr6cLcT5MiDQOkI1HL9NONfP8FRDgMTNXG3nQfVAoFXWIbKk7Q/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggDaBl-xGdnH8naUBGL-zl4YfOhK1EdvpxDF6iYcUQBx-3mUjCb781YN1NBBhXmkNY2gqQMai28XVwH8QnpknYu4Ouqr6cLcT5MiDQOkI1HL9NONfP8FRDgMTNXG3nQfVAoFXWIbKk7Q/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></div>

Note ; Efek ini kompatibel dengan versi terbaru dari Mozilla, Safari, Opera, Chrome namun tidak efektif dengan IE. Selamat mencoba.Silakan hias gambar blog sobat dengan efek zoom dan berbayang.