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