Filter Image Gallery using Pure CSS

This pure CSS code project helps you to create a simple filter image gallery. It uses HTML radio input to filter the images on checked/unchecked events in CSS. Users can view a specific group of images by selecting a label.

How to Create Filter Image Gallery using Pure CSS

Create the HTML structure for the filter gallery as follows:

<h2>CSS Portfolio Gallery</h2>
<input type="radio" id="select-all" name="button">
  <label for="select-all" class="label-all">
    All
  </label>
<input type="radio" id="select-animals" name="button">
  <label for="select-animals" class="label-animals">
    Animals
  </label>
<input type="radio" id="select-lightning" name="button">
  <label for="select-lightning" class="label-lightning">
    Lightning
  </label>
<input type="radio" id="select-desert" name="button">
  <label for="select-desert" class="label-desert">
    Desert
  </label>
<ul class="gallery">
  <li class="animals-item">
    <img src="http://farm8.staticflickr.com/7254/7740405218_deedfa35cb_t.jpg" />
  </li>
  <li class="desert-item">
    <img src="http://farm5.staticflickr.com/4086/4964465857_0bdbe1a84c_t.jpg" />
  </li>
  <li class="lightning-item">
    <img src="http://farm6.staticflickr.com/5114/5858971312_0fec4bdaa0_t.jpg" />
  </li>
  <li class="desert-item">
    <img src="http://farm8.staticflickr.com/7338/12111748274_e3319bfbd5_t.jpg" />
  </li>
  <li class="animals-item">
    <img src="http://farm7.staticflickr.com/6206/6105317674_80f67a9a5e_t.jpg" />
  </li>
  <li class="desert-item">
    <img src="http://farm7.staticflickr.com/6143/5951696095_c6dd89f5da_t.jpg" />
  </li>
  <li class="lightning-item">
    <img src="http://farm4.staticflickr.com/3130/2840585154_232b19bfbd_t.jpg" />
  </li>
  <li class="animals-item">
    <img src="http://farm9.staticflickr.com/8239/8548052436_a36e792c85_t.jpg" />
  </li>
  <li class="lightning-item">
    <img src="http://farm1.staticflickr.com/129/390350345_a0a04a139d_t.jpg" />
  </li>
</ul>

Now, style the image gallery using the following CSS styles:

body{
  margin: auto;
  background: #F2F5E9;
  width: 347px;
  font-family: "Arial"
}
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 {
  cursor: pointer;
  color: #fff;
  background: #5D6B74;
  padding: 5px 19px;
}
input {
  display: none;
}
img {
  padding: 5px;
  border: 1px solid #ccc;

}
/*Select Categorie*/	
input#select-animals:checked ~ .gallery li:not(.animals-item), input#select-lightning:checked ~ .gallery li:not(.lightning-item), input#select-desert:checked ~ .gallery li:not(.desert-item) {
  opacity: 0.1;
}

That’s all! hopefully, you have successfully created Filter Image Gallery using Pure CSS. If you have any questions or suggestions, feel free to comment below.