JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" style="width:600px;">

    <figure class="F1">
        <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf1.jpg?v=1345760446   " title="     Thomas Morris" />
        <figcaption>DGF 1</figcaption>
        <div class="hover_div" style="background-color: red;"></div>
    </figure>
  

    <figure class="F1">
        <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf2.jpg?v=1345797337   " title="   New Orleans Owls - The Owls' Hoot   " /> 
        <figcaption>DGF 2</figcaption>
         <div class="hover_div" style="background-color: green;"></div>
    </figure>

    <figure class="F1">
        <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf03.jpg?v=1345797531  " title="   Johnny Dodds    " /> 
        <figcaption>DGF 3 </figcaption>
         <div class="hover_div" style="background-color: blue;"></div>
    </figure>


</div> <!-- end of wrapper div -->

CSS

.figcaption {
    color:green; display:block; min-width:120px;
}
.F1  {
     float:left; width:120px;  background:yellow; padding:0;margin:0;text-align:center; font-size:12px;
     font-weight:bold;position:relative;vertical-align:bottom; }

.I1 {
     float:left; width:100%;width:120px;height:107px; position: relative;
     }

.hover_div {
    position: absolute;
    z-index: 100;
    opacity: 0.5;
    
    width: 120px;
    height: 107px;
    top: 0px;
    left: 0px;
    
}

JavaScript

$(document).ready(function() {
    $('.hover_div').mouseenter(function(){
        var $img = $(this).siblings('.I1');
		$img.css('z-index','1');
        $img.animate({
            width: 240,
            height: 214
        });
    })
	.mouseout(function(){
        var $img = $(this).siblings('.I1');
		$img.css('z-index','1');
        $img.animate({
            width: 120,
            height: 107
        });
	
	});
});