Postingan

Menampilkan postingan dengan label Thumbnail

Hover Box Image Thumbnail Dengan CSS

Gambar
Untuk postingan kali ini saya akan membuat galery imege dengan hover thumbnail hanya menggunakan CSS, Hover box image thumbnail ini sangat cocok buat blogger yang blognya mengkoleksi banyak gambar atau image. Lihat Demo Untuk kodenya bisa lihat di bawah ini : CSS Code .hoverbox{ cursor: default;list-style: none;} .hoverbox a{ cursor: default;} .hoverbox a .preview{ display: none;} .hoverbox a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;} .hoverbox img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;} .hoverbox li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;} .hoverbox .preview{ border-color: #000;width: 200px;height: 150px;} HTML Code <ul class="hoverbox"> <li><a href=" LinkAnda "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVv