Contoh Tumbnails CSS Popup Image Viewer
Abel
Abel & friendContoh Link CSS Popup Image Viewer
Abel
AbelAbel & friend
Abel & friendCara Pertama Membuat Popup Image Viewer Sebagai Berikut
- Login keakun Blog Sobat
- Buat Postingan Baru/New Entry
- Dan Pasang Kode Css dibawah ini Jangan lupa rubah URL gambarnya
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
Contoh Tumbnails CSS Popup Image Viewer
<a class="thumbnail" href="#thumb"><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0572.jpg" width="100px" height="66px" border="0" /><span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0572.jpg" /><br />Abel</span></a>
<a class="thumbnail" href="#thumb"><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0578.jpg" width="100px" height="66px" border="0" /><span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0578.jpg" /><br />Abel & friend</span></a>
Contoh Link CSS Popup Image Viewer
<a class="thumbnail" href="#thumb">Abel<span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0572.jpg" /><br />Abel</span></a><br />
<a class="thumbnail" href="#thumb">Abel & friend<span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0578.jpg" /><br />Abel & friend</span></a>
Cara Memasang CSS Popup Image Viewer Yang kedua
- Cara yang kedua ini Kode Css dipasang permanen dalam template blog Sobat
- Letakkan kode CSS dibawah ini diatas kode </head> atau ]]></b:skin>
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
- Kemudian Pasang kode HTML berikut ini untuk membuat CSS Popup Image Viewer, letakan dimanapun anda ingin menampilkannya,Misalnya saja pada halaman Posting atau pada Halaman Rumah Sobat hehehehe..
Contoh Tumbnails CSS Popup Image Viewer
<a class="thumbnail" href="#thumb"><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0572.jpg" width="100px" height="66px" border="0" /><span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0572.jpg" /><br />Abel</span></a>
<a class="thumbnail" href="#thumb"><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0578.jpg" width="100px" height="66px" border="0" /><span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0578.jpg" /><br />Abel & friend</span></a>
Contoh Link CSS Popup Image Viewer
<a class="thumbnail" href="#thumb">Abel<span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0572.jpg" /><br />Abel</span></a><br />
<a class="thumbnail" href="#thumb">Abel & friend<span><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0578.jpg" /><br />Abel & friend</span></a>