Image Overlay Toggle

by raad

HTML

<div id="url-i-pr">
    <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8957.jpg" />
    </span>
    <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8958.jpg" />
    </span>
    <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8950.jpg" />
    </span>
    <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8951.jpg" />
    </span>
</div>

CSS

#url-i-pr {
    margin: 10px;
}

.img-container {
    position: relative;
    display: inline-block;
    margin: 2px;
    border: 2px solid transparent;
    width: 100px;
    height: 100px;
}

#url-i-pr img {
    width: 100px;
    height: 100px;
}

.select_img {
    border: 2px solid black !important;
}

.select_img:after {
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0px;
    left: 0px;
    content: '✔';
    color: white;
    background-color: black;
    font-size: 14px;
    text-align: center;
}

JavaScript

$(document).on('click', '.img-container', function (f) {
     f.preventDefault();
     $(this).toggleClass('select_img');
 });