JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="http://www.jqueryscript.net/demo/Simple-jQuery-Context-Menu-Plugin-For-Bootstrap-Context-menu/contextmenu.js"></script>
<div class="cont">
    <span class="glyphicon glyphicon-ok tick" style="display:none;"></span><div class="triangle" style="display:none;"></div>
    <div class="imgcont">
    <div class="image" style="background-image:url('http://www.pageresource.com/wallpapers/wallpaper/cool-cat.jpg')"></div></div>
    <div class="descript">hbasljbnkajsnd.das</div>
</div>


<div class="cont">
    <span class="glyphicon glyphicon-ok tick" style="display:none;"></span><div class="triangle" style="display:none;"></div>
    <div class="imgcont"><div class="image" style="background-image:url('http://www.pageresource.com/wallpapers/wallpaper/cool-cat.jpg')"></div></div>
    <div class="descript">hbasljbnkajsndjkasndknalskdmaslm.das</div>
</div>


<div class="cont">
    <span class="glyphicon glyphicon-ok tick" style="display:none;"></span><div class="triangle" style="display:none;"></div>
    <div class="imgcont"><div class="image" style="background-image:url('http://www.pageresource.com/wallpapers/wallpaper/cool-cat.jpg')"></div></div>
    <div class="descript">knamaslm.das</div>
</div>

CSS

.image {
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;  
}
.selected{   
    outline: 3px solid #cc3333;
}
.cont{
    width:110px; 
    height:100
    max-height:220px  
    display:block;
    margin:10px;
    float:left;  
}
.imgcont{
    width:110px; 
    height:110px;
}
.cont:hover{
    outline: 3px solid rgba(204, 51, 51, 0.50);
}
.triangle{
   width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 28px 0;
border-color: transparent #cc3333 transparent transparent;
line-height: 0px;
_border-color: #000000 #cc3333 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
 float: right;
}
.tick{
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
    position: absolute;
    margin-left: 96px;
}
.descript{
    width:100px;
    word-wrap:break-word;
    padding:3px;
}

JavaScript

$('.cont').click(function(){
    var $item = $(this).closest('.selected');
    if($(this).hasClass('selected')){
        $(this).removeClass('selected');
        $item.find('.tick,.triangle').toggle()
        //$(this).hide('.tick,.triangle')
    }else{
    var $itemNo = $(this).closest('.cont');
	$(this).addClass('selected');
        $itemNo.find('.tick,.triangle').toggle()
    }
})