Cara Membuat Gambar Menjadi Besar Tanpa di Klik

Baru saja saya berkunjung di salah satu situs Toko online untuk melihat beberapa produk menarik yang mungkin saya akan membelinya, setelah melakukan pencarian Produk-produk akhirnya saya menemukan sesuatu yang saya suka. Yang membuat saya terinspirasi adalah tampilan gambar yang membesar secara otomatis tanpa diklik, saya hanya mengarahkan kursor pada menu gambar, maka gambar tersebut menjadi besar.

Cara Membuat Gambar Menjadi Besar Tanpa di Klik merupakan sinonim dari Efek lensa 3D pada gambar/foto yang tidak perlu repot-repot membuka gambar secara terpisah. Awalnya saya bingung untuk menemukan cara membuat gambar besar secara otomatis ini, sebab ternyata kata kunci keyword yang populer di search engine adalah keyword Efek Lensa.

Akhirnya setelah berusaha semaksimal mungkin, apa yang menjadi Inspirasi saya untuk membuat artikel tentang Cara Membuat Gambar Menjadi Besar Tanpa di Klik ketemu juga, dan berikut tutorialnya:

1. Log In ke www.blogger.com

2. Anda bisa tempatkan gambar di widget HTML/Javascript atau di Postingan Artikel

3. Copy dan Paste kode di bawah ini

<center>
<style>
#iphone{
width:500px;
height:300px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8C8NzPttuF4DEHE6wkhsJpHrD4_TjFHSBLTZXp_1cZyVSntARUdk7aqnCEoXTg56Lsr0ry7uS6MynTCsmH7EVB7fzfDOPg8khbWbERhPrNFS42Hqn7WWA4ruUBAdg9J-PIM841JkcHnI/s1600/backround1-terwujud.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:300px;
height:150px;
position:absolute;
top:50%;
left:70%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVheMH4F5mpZ39i5L9t4k9VWVflh87jLSxpRn8phcVf4CAL_JGpNe8DWbIYgnc5-qzGdOEnzt9JVk2jCcxnciFcLPFzXeRsXii3Dhra8yak9LFxhcbznXhQSKE8VH8RFyBDn3qZQD1NdB/s1600/Ibrahim1.jpg') no-repeat center center white;
border:2px solid white;
position:absolute;
height:180px;
width:180px;
display:none;
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
</style>
<div id="iphone">
<div id="webpage">
<img alt="Web Page" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVheMH4F5mpZ39i5L9t4k9VWVflh87jLSxpRn8phcVf4CAL_JGpNe8DWbIYgnc5-qzGdOEnzt9JVk2jCcxnciFcLPFzXeRsXii3Dhra8yak9LFxhcbznXhQSKE8VH8RFyBDn3qZQD1NdB/s1600/Ibrahim1.jpg" height="100" width="200" />
<div id="retina">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B2J42XkvLqFoQ1pUdWtybmpSNTA" type="text/javascript"></script>
</center>

Silahkan Arahkan kursor anda pada foto di bawah

Keterangan:

• Kode berwarna Biru merupakan backround Foto (silahkan ganti)
• Kode berwarna Merah merupakan Foto pembesarnya (sebaiknya ukuran foto besar, contoh >>1000x900)
• Kode berwarna Kuning adalah tampilan foto yang terlihat (silahkan sesuaikan ukuran tinggi dan lebarnya)

Demikian artikel Cara Membuat Gambar Menjadi Besar Tanpa di Klik, Kode Css di atas merupakan kode default, anda dapat berkreasi untuk mengubahnya seperti tampilan contoh foto yang saya paparkan di atas mulai dari bentuk lensa, posisi foto yang tepat ditengah-tengah dan lainnya. Jika ada yang kurang jelas, silahkan tinggalkan komentar anda.