CSS Popup Image Viewer

CSS Popup Image Viewer adalah kode CSS yang berfungsi untuk menampilkan gambar pada jendela baru (popup)dengan ukuran yang berbeda apabila gambar disorot dengan mouse.

Sebagai contoh coba sampeyan sorot gambar dan link dibawah ini;

Dalam bentuk gambar

dalam bentuk link

Contoh Link

Kode dan cara mengaplikasikan di blogger sebagai berikut;

Login dengan akun sampeyan di Blooger

Pasang kode ini pada template blog sampeyan tepatnya diatas kode ]]></b:skin>

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #fff;
padding: 10px;
left: -1000px;
border: 5px solid #ccc;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 5px;
}
.thumbnail:hover span{
visibility: visible;
top: -200px;
left: 20px;
}

Kemudian Pasang kode HTML berikut ini untuk membuat CSS Popup Image Viewer, letakan dimanapun kita ingin menampilkannya,Misalnya saja pada halaman Posting;

Dalam bentuk gambar

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7t-9IgcbddpBcVeAhUHgkzS77cBIT-qy-bxwwfvnNR_hZAErm283-o2fJesUSclyLm148K5bhFzfDquoR6TMdwbCzXBpLVrpCo9ASdZDmhqbSbWWpPkzNuD1ZF7yUtLtMvItAPBk16U/s1600/vector.jpg" height="298" width="320" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7t-9IgcbddpBcVeAhUHgkzS77cBIT-qy-bxwwfvnNR_hZAErm283-o2fJesUSclyLm148K5bhFzfDquoR6TMdwbCzXBpLVrpCo9ASdZDmhqbSbWWpPkzNuD1ZF7yUtLtMvItAPBk16U/s1600/vector.jpg" />
</span></a>

dalam bentuk link

<a class="thumbnail" href="http://belajar-coreldraw.blogspot.com/2014/05/perbedaan-vector-art-dan-vexel-art.html">Contoh Link<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7t-9IgcbddpBcVeAhUHgkzS77cBIT-qy-bxwwfvnNR_hZAErm283-o2fJesUSclyLm148K5bhFzfDquoR6TMdwbCzXBpLVrpCo9ASdZDmhqbSbWWpPkzNuD1ZF7yUtLtMvItAPBk16U/s1600/vector.jpg"/></span></a>

kalau berkenan dan mau pake, ganti URL link dan URL gambar dengan punya sampeyan

Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.

Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.