JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<div class="bg_img_options">
    <div class="bg_img_option_parent">
        <div class="bg_img_option_child_selector"></div>
        <img class="bg_img_option_child_img" src="https://lh6.googleusercontent.com/-IxRknD2180s/UcojKSfeWII/AAAAAAAABkA/IKXa_LVQP0U/w140-h93-p/%25C2%25A9%2BAravind%2BKrishnaswamy_20120408-%252818_58_48%2529-sobranes-arch-s2-0387-Edit.jpg" />
    </div>
    <div class="bg_img_option_parent">
        <div class="bg_img_option_child_selector"></div>
        <img class="bg_img_option_child_img" src="https://lh6.googleusercontent.com/-V8YbdU7_SOE/UcojLh_h8NI/AAAAAAAABl4/ahX5qN38wo4/w140-h93-p/%25C2%25A9%2BAravind%2BKrishnaswamy_20120414-%252808_36_41%2529-table-mountain-s2-11292-Edit.jpg" />
    </div>
    <div class="bg_img_option_parent">
        <div class="bg_img_option_child_selector"></div>
        <img class="bg_img_option_child_img" src="https://lh5.googleusercontent.com/-SDKIkp26kNY/UcojL0T3pBI/AAAAAAAABkU/ktL4c0hdtXE/w140-h93-p/%25C2%25A9%2BBrian%2BMatiash_20110102-IMG_8104-Edit.jpg" />
    </div>
    <div class="bg_img_option_parent">
        <div class="bg_img_option_child_selector"></div>
        <img class="bg_img_option_child_img" src="https://lh6.googleusercontent.com/-LStDaqBmK-k/UcojL2IYEPI/AAAAAAAABkg/-izl9z_JcLk/w140-h93-p/%25C2%25A9%2BBrian%2BMatiash_Fingerlings_BrianMatiash.jpg" />
    </div>
</div>

CSS

div{
    margin:0;
    padding:0;
}
img{
    border:0;
    margin:0;
    padding:0;
}
.bg_img_option_parent {
    position:relative;
    display: inline-block;
    width: 140px;
    height: 93px;
}
.bg_img_option_child_selector {
    position:relative;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    position: absolute;
    background: rgba(0, 0, 0, 0) url('http://icons.iconarchive.com/icons/dryicons/simplistica/32/accept-icon.png') no-repeat center center;
    width: 100%;
    height: 100%;
    cursor:pointer;
}
.bg_img_option_child_selector:hover {
    filter: alpha(opacity=1);
    opacity: 1;
}

.bg_img_option_child_active {
    filter: alpha(opacity=1);
    opacity: 1;
}

JavaScript

$(".bg_img_option_child_selector").click(function(){
    var gate = false;
    if($(this).hasClass('bg_img_option_child_active')){
        gate = true;
        $(this).removeClass('bg_img_option_child_active');        
    }
    if($(".bg_img_options").find('.bg_img_option_child_active').length > 0){
        $(".bg_img_option_child_selector").each(function() {
            $(this).removeClass('bg_img_option_child_active');
        });
    }
    if(gate === false){
        $(this).addClass('bg_img_option_child_active');
        alert( $(this).parent().find('img').attr('src') );
    }    
});