Membuat Efek Lensa Flip 3D Pada Gambar

Membuat Efek Lensa Flip 3D Pada Gambar - Membuat Gambar pada artikel blog sudah hal yang biasa, karena dengan adanya gambar pada tulisan dapat memudahkan pengunjung untuk memahami tujuan dari isi tulisan pada blog, tetapi merubah gambar tersebut agar terkesan unik dan menarik di mata pengunjung tidak banyak yang melakukannya.

Seperti Efek Remote Link Pada Gambar sebelumnya, di artikel kali ini saya akan mencoba mengubah efeknya menjadi sebuah LENSA PEMBESAR saat mouse anda menyentuh gambar. Detailnya kursor panah mouse anda seolah-olah akan bertindak sebagai lensa untuk melihat ukuran gambar menjadi 3 Dimensi saat anda menyorot obyek. Membutuhkan waktu yang cukup lama saat menggabungkan antara kode script dengan CSS Code, dan memodifnya sedikit sehingga akan memberikan titik fokus pada obyek yang kita tentukan dan menghasilkan Efek Lensa Flip 3D Pada Gambar Seperti berikut :

Buat sahabat-sahabat Tercinta SAHABAT BLOGGER 77  yang mau mencoba, pintu hatiku selalu terbuka untukmu...Hufft..!! jadi kayak maaf-maafan neh, hehehe...
OK deh..Berikut kode Membuat Efek Lensa Flip 3D Pada Gambar, Silahkan COPY lalu PASTE pada mode HTML halaman postingan anda

<center>
<style>
#iphone{
width:550px;
height:293px;
background:url('http://4.bp.blogspot.com/-eJiEQ7apQkg/UtdJ8gPKEiI/AAAAAAAAAjc/2qJExC5z8Qc/s1600/garden_beautiful.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:365px;
height:207px;
position:absolute;
top:63%;
left:62%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('http://2.bp.blogspot.com/-LMPcV13GkTs/Utc-gRzXfxI/AAAAAAAAAjM/mXAOCey8guU/s1600/pictures-sahabatBLOGGER+77.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="http://2.bp.blogspot.com/-LMPcV13GkTs/Utc-gRzXfxI/AAAAAAAAAjM/mXAOCey8guU/s1600/pictures-sahabatBLOGGER+77.jpg" height="207" width="365" />
<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="http://faceblog-evolutions.googlecode.com/files/script.js" type="text/javascript"></script></center>

Keterangan -

1. Teks Biru adalah Gambar 1 (Gambar Lensa Flip)
2. Teks Merah adalah Gambar 2 (Gambar Utama)
3. Silahkan Ganti dengan URL gambar anda dengan URL gambar yang sama
4. Selamat Mencoba Membuat Efek Lensa Flip 3D Pada Gambar, semoga bermanfaat
5. Terima Kasih