First, please do not mark this as duplicate, cause I want to ask a little modification from this QnA, here. I'm using this answer to achieve what I want, but it almost meets what I need. Here is his demo.
I am trying to achieve what he did, this is what I've made so far. But, when I click the image, because of the border, it makes the images a little get bigger. What I want is, when the image (checkbox) checked, there are checkboxes icon on the top left (its done) and the image surrounds with a border without making the image get bigger. Here is the code in my snippet:
here is the HTML:
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="http://lorempixel.com/103/103" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="http://lorempixel.com/102/102" /></label>
</li>
</ul>
this is the CSS:
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
display: block;
position: relative;
cursor: pointer;
width: 100%;
height: 100%;
}
label:before {
background-color: red;
color: white;
display: block;
border: 1px solid red;
position: absolute;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-ms-transition-duration: 0.4s;
}
label img {
height: 100%;
width: 100%;
}
:checked + label {
border-color: red;
}
:checked + label:before {
content: "✓";
background-color: red;
border: 1px solid red;
z-index: 99;
}
:checked + label img {
z-index: -1;
border: 1px solid red;
}
Thank you!
