Membuat Gallery Gambar Efek Pop Up Image Dengan CSS

Membuat Gallery Gambar Efek Pop Up Image Dengan CSS – setelah pada sebelumnya adalah membuat Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS maka sekarang tidak jauh berbeda dengan tutorial tersebut. Cuma yang sedikit jelas terlihat berbeda pada tutorial ini adalah pada link. Jika setelah tips ini diterapkan kedalam blog maka yang terjadi adalah pada link juga akan menampilkan deskripsi berupa gambar yang sudah dimaksudkan untuk lebih memperjelas keterangan link tersebut. Membuat Gallery Gambar Efek Pop Up Image Dengan CSS ini adalah galeri foto berbasis murni CSS yang menampilkan versi gambar yang lebih besar dari gambar thumbnail dinamis ketika gambar tersorot oleh mouse. Sebuah keterangan berupa bahasa HTML juga dapat ditambahkan ke dalam gambar yang diperbesar, dan setiap aspek dari Image Gallery terdapat keterangan HTML pada halaman. Idenya adalah dengan menggunakan CSS, hover class semu menyebabkan elemen bereaksi onMouseOver. Ketika itu terjadi, maka elemen benar-benar diposisikan untuk memegang gambar yang diperbesar, berlabuh pada halaman dengan frame lain dengan posisi diatur untuk relatif, akan ditampilkan. Selanjutnya, itu mungkin untuk memodifikasi perilaku sehingga gambar diperbesar hanya ditampilkan onClick. Agar lebih jelasnya, berikut adalah tutorial tentang cara Membuat Gallery Gambar Efek Pop Up Image Dengan CSS kedalam posting blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.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;
}

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Gallery Gambar Efek Pop Up Image Dengan CSS ini kedalam posting blog maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:

<div class="gallerycontainer">

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCUw1UqRcdqXe7QRXkSP3jYgMljkWwX-ypGKs4-4bmSChzlfYmXoAHu0NsF3itiXpLMnW3g_gaqt8q6d1ryq_soXOpvyuuDgDNjc6v9PkfIGs28nS-5luaKynOUuInBrtwdFu0KzNito/w400-h300-no/Camilla+Belle-cute-06.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCUw1UqRcdqXe7QRXkSP3jYgMljkWwX-ypGKs4-4bmSChzlfYmXoAHu0NsF3itiXpLMnW3g_gaqt8q6d1ryq_soXOpvyuuDgDNjc6v9PkfIGs28nS-5luaKynOUuInBrtwdFu0KzNito/w400-h300-no/Camilla+Belle-cute-06.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTjlrhyphenhyphensQEA4Zc0995o2jIkXHzIeeYamVgMo7yuzQOpwfagd2Sqa_c9yFUCreM1g-9IiOYEd7f6lf4MObXnheQHXwus241R_rsii9kpdX0i4IZ-acgnyRzPpxuWyFez7V5r4GZa98A9No/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTjlrhyphenhyphensQEA4Zc0995o2jIkXHzIeeYamVgMo7yuzQOpwfagd2Sqa_c9yFUCreM1g-9IiOYEd7f6lf4MObXnheQHXwus241R_rsii9kpdX0i4IZ-acgnyRzPpxuWyFez7V5r4GZa98A9No/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<br />

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPqmSeY7Ycf3cBPQLyfLK-794uTYAKVm_0q14JZjRl-yxzEGmu6XNaMWuPj9qI07u5aOdTOaeuc7vcRe8d0Sh7Gl0FvblQjwHedkKQSza1lgGMPoIyXt_rtS8oNIgRYXRei1OVcKKwyY/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPqmSeY7Ycf3cBPQLyfLK-794uTYAKVm_0q14JZjRl-yxzEGmu6XNaMWuPj9qI07u5aOdTOaeuc7vcRe8d0Sh7Gl0FvblQjwHedkKQSza1lgGMPoIyXt_rtS8oNIgRYXRei1OVcKKwyY/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDZIExObGEeypIrWnLIIuZ1T7D2J_olS1uqmhhTUK_jjI5depORXw41PM9dbeCTA6T3R6dmpffsvgFRbdHLGN8_j3kogYoDGIDWVDlbgahMhPHVuYddvGXp0vybygHk1mPcaQxPb4t6jk/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDZIExObGEeypIrWnLIIuZ1T7D2J_olS1uqmhhTUK_jjI5depORXw41PM9dbeCTA6T3R6dmpffsvgFRbdHLGN8_j3kogYoDGIDWVDlbgahMhPHVuYddvGXp0vybygHk1mPcaQxPb4t6jk/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<br />

<a class="thumbnail" href="http://mas-andes.blogspot.com">Faceblog Evolutions<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8E1sEDUv2Xnuvn5sTxgs39NjWPurwhISpfM5odphiWHBULjVdWrHaJ5JGsbvyxK6OEOyh9srRJpTf6klenD3SrprjjJ2qlj1cCkemTBwU5GnplTiaaL_IiVI7cOdimufNbVpWhWRzsI/w850-h533-no/faceblog-evolutions.jpg" width="500px" height="300px"/><br />Faceblog Evolutions</span></a>

</div>

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

DEMO:

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
Faceblog Evolutions
Faceblog Evolutions