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:
Agar lebih jelasnya, berikut adalah tutorial tentang cara Membuat gallery gambar efek Pop Up image dengan CSS kedalam posting blog:
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat2. 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{5. Simpan Template.
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;
}