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.