Image Checkbox Using HTML and CSS

Image Checkbox Using HTML and CSS

Image Checkbox Using HTML and CSS

In this article, we’ll see how we can create an image checkbox. You read it right, Normally we use checkboxes to select our hobbies or select multiple options. Now that will be included with a change here it is an image that will be checked.

For eg when we do the captcha process there we select multiple images this will act just like that only. Using our front-end development tool HTML & CSS. 

Today We’ll see how to make an Image Checkbox Using HTML and CSS with complete source code so you just easily copy and paste it into your project.

Hello Coders I Welcome you all to Codewithrandom with this fresh blog which will help us to make the Image Checkbox using HTML & CSS. I hope you have got an idea about the project.

 

HTML Code for Image Checkbox

<label for="image-check">
  <input type="checkbox" id="image-check">
  <img src="https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ" width="200">
</label>

In this HTML Code, we have just defined a checkbox and specified an id which will be called in the CSS to style or set the alignment. And then we linked an image in it because in this project image is essential use. Let us style the project using CSS code.

 

CSS Code for Image Checkbox

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: orange;
}

label {
  cursor: pointer;
}

img {
  box-shadow: 0 0 0 10px #FFF0;
  transition: box-shadow 0.1s;
}

input {
  display: none;
}

input:checked + img {
  box-shadow: 0 0 0 10px #FFF;
  transition: box-shadow 0.11s;
}

In this CSS Code, we have set the size for the body using align-items, justification of content, background, display, etc. Then we style the image and the id which was defined in the HTML code is called, and in the end, we have added both the id if you see in the last section. In that, we have added a box-shadow command and transition effect. Let’s see the Final output of the project.

Final Output Image Checkbox Using HTML and CSS

We have successfully created our Image Checkbox Using HTML and CSS. 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 random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You For Visiting!!!

Written By – Harsh Sawant

Code By – @harshh9



Tags: ,

Leave a Reply