JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imp__fl">
<a href="#" class="link_opn_img">
  <div class="us_img__cnt" data-original="../img/cnt4.png" style="display: block; background-image: url('https://pp.userapi.com/c639220/v639220474/fc61/SlPAXacHSXM.jpg');background-size: cover;"></div>
</a>
<div class="hovr__cont"><!--блок ховер, который появляется при наведении на us_img__cnt-->
  <div class="wrp__posit">
    <i class="fa fa-plus-square-o" aria-hidden="true"></i><!--иконочные шрифты-->
    <div class="mod__hvr__icon">

      <div class="wrp__detail">
          <i class="fa fa-heart" aria-hidden="true"></i> <!--иконочные шрифты-->
          <i class="fa fa-comment" aria-hidden="true"></i>
          <i class="fa fa-share-square" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>
</div>

CSS

.imp__fl{
/*position: relative;
float: left;*/
width: 300px;
height: 300px;
}
.link_opn_img{
display: inline-block;
width: 100%;
height: 100%;
color: #fff;
z-index: 999;
}
.us_img__cnt{
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
background-repeat: no-repeat;
}
.hovr__cont{
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
opacity: 0;
padding-left: 15px;
padding-right:  15px;
text-align: center;
height: 100%;
}
.imp__fl:hover .hovr__cont{
opacity: 1;		
transition: all .7s;
}

JavaScript

$(".imp__fl").click(function () {
	var thumbs = document.getElementsByClassName("us_img__cnt");
	for (var i = 0; i < thumbs.length; i++) {
	  thumbs[i].onmousedown = function () {
	    var src = this.style.backgroundImage.split('"')[1];
	    alert( src );
	  };
	}
	 alert( "hallo" );//этот алерт выводит
   
	
});