Image Checkbox Select

by JQ Purfect

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
    <img src="http://place-hold.it/250x250/000/ffffff" onclick="alert('image 1 click');" />
    <input type="checkbox" class="checkbox" id="check1" />
    
    <!-- onclick="alert('checkbox click');"  -->
</div>
<div class="container">
    <img src="http://place-hold.it/250x250/000/ffffff" onclick="alert('image 2 click');" />
    <input type="checkbox" class="checkbox" id="check2" />
</div>

CSS

.container {
    position: relative;
    width: 250px;
    height: 250px;
    float: left;
    margin-left: 10px;
}
.checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 25px;
}