Membuat gallery gambar efek Pop Up image dengan CSS

Membuat gallery gambar efek Pop Up image dengan CSS – Sebelum nya saya pernah memposting Membuat image efek Accordion CSS3 di Blog hari ini saya akan membahas tentang Membuat gallery gambar efek Pop Up image dengan CSS
Agar lebih jelasnya, berikut adalah tutorial tentang cara Membuat gallery gambar efek Pop Up image dengan CSS kedalam posting blog:

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.gallerycontainer{
position: relative;
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{
position: absolute;
background-color: lightyellow;<
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}

5. Simpan Template.

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<div class="gallerycontainer">

<a class="thumbnail" href="http://irvan-efendy.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja09SWyQd90SI0r661ks8PlmismM3MpKN7cz3lZOk2zwkC9d-O1yRJ_rlV9jazHk47iyX63lUo-2eu2PYuzxaKkgTNNGV-FqLl_AVD0_zSRAEDwISnesvpoP2b3-Hg3PgxgQcsyRl5kNya/s1600/BIE_Demo-1.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja09SWyQd90SI0r661ks8PlmismM3MpKN7cz3lZOk2zwkC9d-O1yRJ_rlV9jazHk47iyX63lUo-2eu2PYuzxaKkgTNNGV-FqLl_AVD0_zSRAEDwISnesvpoP2b3-Hg3PgxgQcsyRl5kNya/s1600/BIE_Demo-1.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<a class="thumbnail" href="http://irvan-efendy.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIdX4BhMuNkm_0dHuMg1N9CL59gG8B1PM3TvMy9vWyIrxSFRARgPruY138vyidIJVXHdpaXfgE51IEXnYEAAcp_F0-vf2k7LWeK7QPq9zYtnjCUp5sFWSznJIsimW3jlffLTCL3Ejwu7-/s1600/BIE_Demo-2.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIdX4BhMuNkm_0dHuMg1N9CL59gG8B1PM3TvMy9vWyIrxSFRARgPruY138vyidIJVXHdpaXfgE51IEXnYEAAcp_F0-vf2k7LWeK7QPq9zYtnjCUp5sFWSznJIsimW3jlffLTCL3Ejwu7-/s1600/BIE_Demo-2.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<br />
<a class="thumbnail" href="http://irvan-efendy.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvBQfmhIR14152mwROcbyS_HiiS2-Xu7bBwqg4yUj-EGE_v5FHAcFOpyx9EDUfzg9ph6ymJtL9XCeL_K4Y36wnHqMmMKfzmoB92jRLnphyFJpVB6fSxv3wS6dmRXWkO3v5-_XCUByqkPdy/s1600/BIE_Demo-3.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvBQfmhIR14152mwROcbyS_HiiS2-Xu7bBwqg4yUj-EGE_v5FHAcFOpyx9EDUfzg9ph6ymJtL9XCeL_K4Y36wnHqMmMKfzmoB92jRLnphyFJpVB6fSxv3wS6dmRXWkO3v5-_XCUByqkPdy/s1600/BIE_Demo-3.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<a class="thumbnail" href="http://irvan-efendy.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRqdKekczrXFaXOmPOImrmCB_ulW0ol1eIuT4MijCoguIjOvLq8aZBJs-KxquHJjXyGA5zjinpi296QQ6qjBpFTqmfK4iWwCTY3s-YaMUBZp_mBULxi-juyBbWa0Qi6PhVFRY2Ulwz2zaW/s1600/BIE_Demo-4.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRqdKekczrXFaXOmPOImrmCB_ulW0ol1eIuT4MijCoguIjOvLq8aZBJs-KxquHJjXyGA5zjinpi296QQ6qjBpFTqmfK4iWwCTY3s-YaMUBZp_mBULxi-juyBbWa0Qi6PhVFRY2Ulwz2zaW/s1600/BIE_Demo-4.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<br />

<a class="thumbnail" href="http://irvan-efendy.blogspot.com/">Blog Irvan Efendy<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4FUhnVCEmYbDPJ0LoebDjZDp7GX81Gg9EP4JNowpp1hwn7hKoGC2JecmSP7IC79jRq5nM7wzFbIjc0TjsH2i5fdbeekmKMaKl2PmS6xVPZGSmxvV33Olrrzt6cYwmAP4GmpQ4HUN9YzaM/s1600/BlogIrvanEfendy.PNG" width="500px" height="300px"/><br />Blog Irvan Efendy</span></a>
</div>

Keterangan:
Ganti "http://irvan-efendy.blogspot.com"dengan link tujuan yang di inginkan.
Ganti URL gambar dengan gambar lain yang di inginkan.

DEMO nya seperti ini:

Silahkan isi dengan teks deskripsi sesuka anda
Silahkan isi dengan teks deskripsi sesuka anda

Silahkan isi dengan teks deskripsi sesuka anda
Silahkan isi dengan teks deskripsi sesuka anda
Blog Irvan Efendy
Blog Irvan Efendy