Create a Filter Image Gallery using HTML and CSS

In this article, we are going to create an Filterable Image Gallery using the HTML and CSS. An image gallery is a place in our PC and Laptop where all our images are stored but in this project, we have used the word ‘filter’ which will filter them according to their needs or label and display the user as soon as he will use the filter.

Hey Coders!! Welcome to Codewithrandom in this project we are going to create a Filter Image Gallery using HTML and CSS.

I hope you have got an idea about this project.

HTML Code for Filter Image Gallery

<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="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>

In this code we have defined the structure of the image gallery in which we have named the section and added some image in it. And the labelled section is set with the id which will be called in the CSS script to add some function. Let us style the image gallery using CSS3.

50+ Html ,Css & Javascript Projects With Source Code

CSS Code for Filter Image Gallery

body {
  margin: auto;
  background: orange;
  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;
}

In this CSS code we have styled the body, ul, label, image etc. In which we have set the padding & border for the required elements and attributes which are present in HTML Code. Also we have added some colors for each icon and the font type as well. Let us see the final output.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Final Output Of Filter Image Gallery using HTML and CSS

We have Successfully created our Filter Image Gallery using HTML and CSS | Filter Image Gallery. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – @harshh9