JSFiddle - React, Tailwind, and code Playground

HTML

<table id="products" border="0"  cellspacing="10" cellpadding="10" align="center">
<tr>
<td>
    <div class="wrapper">
               <a href="http://www.otterwell.com/">
    <img width="250" height="305" src='http://www.percivalclo.com/wp-content/uploads/waxmac-y2.jpg' /></a>
        <div class="description">
            <div class="description_content">Fisherman Anorak – Classic Blue and yellow waxed British Millerain Fabric</div>
        </div>
    </div>
</td>
<td>
         <div class='wrapper'>
               <a href="http://www.otterwell.com/"><img width="250" height="305" src='http://www.percivalclo.com/wp-content/uploads/waxmac-y2.jpg' /></a>
               <div class='description'>
            <div class='description_content'>Fisherman Anorak – Navy Blue waxed British Millerain Fabric</div>
           </div>
    </div>
    </td>
        <td><!-- wrapper div -->
    <div class='wrapper'>

        <!-- image -->
        <img width="250" height="305" src='http://www.percivalclo.com/wp-content/uploads/waxmac-y2.jpg' />
        <!-- description div -->
        <div class='description'>
            <!-- description content -->
            <div class='description_content'>Fisherman Anorak – Tan waxed British Millerain Fabric</div>
            <!-- end description content -->
        </div>

        <!-- end description div -->
    </div>
    <!-- end wrapper div -->
</td>
    </tr>
    <tr>
        <td><div class='wrapper'>
        <img width="250" height="305" src='http://www.percivalclo.com/wp-content/uploads/waxmac-y2.jpg' />
        <div class='description'>
            <div class='description_content'>Patch Pocket Trousers – Putty</div>

        </div>
    </div>
    </td>
        <td><div class='wrapper'>
        <img width="250" height="305" src='http://www.percivalclo.com/wp-content/uploads/waxmac-y2.jpg' />
        <div class='description'>
            <div class='description_content'>Patch Pocket Trousers – Olive</div>

        </div>
    </div>
   ...

CSS

div.wrapper{
    zoom: 1;
    position:relative; /* important(so we can absolutely position the description div */ 
}

div.wrapper img{
    border: 0 none; 
}

div.description{
    position:absolute; /* absolute position (so we can position it where we want)*/
    bottom:0px; /* position will be on bottom */
    left:0px;
    display:none; /* hide it */
    /* styling bellow */
    background-color:black;
    font-family: 'tahoma';
    font-size:15px;
    color:white;
        width:100%;
text-align:left;
}
div.description_content{
    padding:10px 10px 10px 20px;
        cursor:default;
}
#products{
margin: 0 auto
}

JavaScript

$(window).load(function(){
    //for each description div...
    $('div.description').each(function(){
        //...set the opacity to 0...
$(this).css('opacity', 0);
        //..set width same as the image...
        $(this).css('width', $(this).siblings('img').width());
        //...get the parent (the wrapper) and set it's width same as the image width... '
        $(this).parent().css('width', $(this).siblings('img').width());
        //...set the display to block
        $(this).css('display', 'inline-block');
    });
    
    $('div.wrapper').hover(function(){
        //when mouse hover over the wrapper div
        //get it's children elements with class descriptio
        //and show it using fadeTo
        //$(this).children('.description').show();
        $(this).children('.description').stop().fadeTo(500, 0.7);
    },function(){
        //when mouse out of the wrapper div
        //use fadeTo to hide the div
        $(this).children('.description').stop().fadeTo(500, 0);
    });
    
});