Gallery Gambar Efek Filter Dengan CSS

Gallery Gambar Efek Filter Dengan CSS - Mengumpulkan koleksi gambar dalam satu frame yang susunannya secara acak dengan sistem pemanggil input-select-label, maka gambar yang sudah Anda susun dan tempatkan pada label-label tertentu akan dengan mudah Anda tampilkan dalam sebuah tampilan gallery gambar efek filter.

Untuk mengganti kinerja link pada tombol label, saya menggunakan sistem perintah CSS input radio-checked, artinya saat link pada tombol label di KLIK tidak akan mengarah pada halaman lain, sedangkan untuk menon-aktifkan isi gambar pada label yang tidak dipilih, saya menggunakan efek blur filter. Fungsi efek filter disini adalah untuk menyaring dan mengumpulkan semua isi label yang terpanggil (jika tombol label di KLIK), sehingga yang akan tampil hanya gambar pada label yang kita pilih saja seperti ini:




DEMO SHOW

BACA JUGA

Tampilkan Foto Kecil Saat Gambar Utama Dihover



Sebenarnya kinerja efek pada gallery gambar kali ini perintahnya sama seperti pembahasan pada artikel sebelumnya tentang CSS3 Slider Concept Design, hanya pada tampilan disana saya menggunakan elemen CSS-target untuk memanggil gambar jika tombol label di KLIK. Untuk efek gambar seperti ini, saya menggunakan efek filter blur. CSS lengkapnya seperti ini:

<style>
ul {padding:0}
ul.gallery li {
  display: inline-block;
  opacity:1;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out}

label:hover {background:red;text-shadow:1px 1px 2px #111}
label {
  cursor: pointer;
  color: #fff;
  background: #39f;
  padding: 6px 19px;
  margin:0 -26px 0 26px;
  border-left:2px solid red}

img {padding: 5px;border: 1px solid #ccc;width:150px;margin:10px 2px -10px 0}
/* Menu label Item gambar */
input {display: none}
input#select-animals:checked ~ .gallery li:not(.animals-item),
input#select-Car:checked ~ .gallery li:not(.Car-item),
input#select-lovely:checked ~ .gallery li:not(.lovely-item) {opacity: 0.1}
</style>

Setiap satu menu label sudah saya isi dengan 4 buah gambar, sebagai contoh saya membuat gallery gambar dengan 3 menu label dengan masing-masing nama label yang berbeda. misalnya seperti ini:

Category Name label

• Animal : 4 buah gambar
• Car Picture : 4 buah gambar
• Lovely Pic : 4 buah gambar

jadi total gambar ada 12 buah yang disusun secara acak dalam satu album gallery, Jika Anda ingin menambahkan beberapa gambar lagi pada masing-masing label, cukup letakkan URL-Gambar Anda pada category label sesuai nama menu seperti ini:

<input type="radio" id="select-all" name="button">
<label for="select-all" class="label-all">All Image</label>
<input type="radio" id="select-animals" name="button">
<label for="select-animals" class="label-animals">Animals</label>
<input type="radio" id="select-Car" name="button">
<label for="select-Car" class="label-Car">Car Picture</label>
<input type="radio" id="select-lovely" name="button">
<label for="select-lovely" class="label-lovely">Lovely</label>

<ul class="gallery">
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-1.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-1.gif"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-1.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-2.gif"></li>
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-2.jpg"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-2.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-3.gif"></li>
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-3.jpg"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-3.jpg"></li>
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-4.jpg"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-4.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-4.gif"></li>
</ul>

Mungkin saat ini Anda banyak memiliki koleksi gambar, namun bingung akan menyusunnya seperti apa untuk ditampilkan dalam blog. Dengan Membuat Gallery Gambar Efek Filter Dengan CSS seperti ini akan membuat album gambar Anda terlihat lebih rapi dan menarik.

Selamat mencoba..!!