How to make checkboxes with images - html

Question

I have default checkboxes on my website, with only text on every checkbox(e.g. example).
Does it possible to design the checkboxes to have images on them? and maybe to put "v" mark on a checkbox if it been chosen?
I want it to look something like:

Answer 1

This is how you can simulate an image based checkbox using a label
input {
display: none
}
/* switch image */
label[for="chk1"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
background: url(http://placehold.it/100/ff0);
}
/* add content */
label[for="chk2"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
content: 'V';
position: absolute;
left: 0;
right: 0;
font-size: 90px;
font-weight: bold;
font-family: arial;
}
<input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">
<label for="chk1"></label>
<label for="chk2"></label>
<div>Click a box to toggle it</div>

Answer 2

I don't think most people put images in their checkboxes. They either make an image act like a checkbox like #LGSon did, or they wrap an image and checkbox together inside of a div. Something like this:
function toggleCheck(sibling) {
var checkBox = sibling.parentNode.getElementsByTagName("input")[0];
checkBox.checked = !checkBox.checked;
}
.image-box {
width: 150px;
text-align: center;
background: #E9E8E7;
padding: 10px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.image-box img {
max-width: 100%;
display: block;
margin-bottom: 7px;
}
<div class="image-box">
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" />
<input id="dogs" type="checkbox" name="dogs" value="Dog">
<label for="dogs">I like dogs</label>
</div>