JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a href="#">Produto 001</a>
<p>Imagem do produto</p>  
<img src="http://1.bp.blogspot.com/-1WC__vpuKU0/TrX8GnA3mOI/AAAAAAAAAYs/ovMjZb1pzL0/s1600/6180demonio.jpg" alt="img1" />
</div>


<div>
<a href="#">Produto 002</a>
<p>Imagem do produto</p> 
<img src="https://78.media.tumblr.com/de90a314cb34e94bc7ed076d3c3bc981/tumblr_p4w8pidtZq1r5pt3ho1_500.jpg" alt="img2" />
</div>

CSS

div {  
   border:1px solid #CCC;
   padding:4px;
   margin:4px; 
   float:left;
   width:180px;
   text-align:center;
   min-height:200px;
   height:auto;
   overflow:hidden;
    }

img {
    width:150px;
    height:130px;
    margin:3px;
    }

JavaScript

$("img").hide();

$("a").mouseover(function(){ 
   $(this).siblings('img').show("slow");
}).mouseout(function(){
    $(this).siblings('img').hide("slow");
});