JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shirt-block">
    <p>lorem ipsum</p>
    <figure>
        <img class="shirt" src="http://www.lybstore.com/img/YMC_SS13mensFlats-28-950x1216.jpg"/>
    </figure>
</div>

<div class="shirt-block">
    <p>lorem ipsum</p>
    <figure>
        <img class="shirt" src="http://www.lybstore.com/img/YMC_SS13mensFlats-28-950x1216.jpg"/>
    </figure>
</div>

<div class="shirt-block">
    <p>lorem ipsum</p>
    <figure>
        <img class="shirt" src="http://www.lybstore.com/img/YMC_SS13mensFlats-28-950x1216.jpg"/>
    </figure>
</div>

<div class="shirt-block">
    <p>lorem ipsum</p>
    <figure>
        <img class="shirt" src="http://www.lybstore.com/img/YMC_SS13mensFlats-28-950x1216.jpg"/>
    </figure>
</div>

CSS

.shirt-block {
    width:47%;
    float:left;
    margin:0; padding:0;
    margin-left:2%;
    min-width:200px;
    max-width:600px;
    position:relative;
}

.shirt-block > figure { margin:0; padding:0; height:100%; position:absolute; top:0; right:0; width:59%; }
.shirt-block > p { margin:0; height:100%; position:absolute; top:0; left:0; width:40%; }

.shirt-sizer { width:59%; /* same as figure width */ }

.shirt {
    width:100%;
    position:absolute;
    top:0;
    right:0;
}

.shirt-hover {
    background:url(http://www.lybstore.com/img/home-hover-bg.png);
    background-size:cover;
    position:absolute;
    top:0; right:0;
    z-index:100;
    width:100%;
    height:100%;
    opacity:0;
}

JavaScript

$('figure').append('<div class="shirt-hover"/>');

var $sizer = $("<img/>",{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAMAAADXLxypAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACBJREFUeNrtwTEBAAAAwiD7p14Hb2AAAAAAAAAAAABcAiWAAAEKyWyqAAAAAElFTkSuQmCC"}).addClass("shirt-sizer");

$('.shirt-block').append($sizer);

$('.shirt-hover').hover(function(){
    $(this).stop().animate({opacity:1},200);
},function(){
    $(this).stop().animate({opacity:0},200);
});