CSS Popup Image Viewer Dapat menampilkan link atau thumbnail gambar dan apabila gambar atau Link tersebut di MouseOver maka akan menampilkan gambar lain secara Popup dalam ukuran yang berbeda. Gambar akan diperbesar dengan menggunakan kode CSS.Untuk lebih jelasnya perhatikan Tutorialnya dibawah ini
Nah sebagai buktinya coba arahkan cursor sobat pada contoh dibawah ini
Nah sebagai buktinya coba arahkan cursor sobat pada contoh dibawah ini
Contoh Tumbnails CSS Popup Image Viewer
Abel
Abel & friend
Contoh Link CSS Popup Image Viewer
Abel
Abel
Abel & friend
Abel & friend
Cara 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>
.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>
.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>
<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>
Narasumber ; http://www.dynamicdrive.com/
Posted On : 26 Oktober 2011 Time : 18.46
