JSFiddle - React, Tailwind, and code Playground

HTML

<div align="center" class="mypro" style="position:relative; width:300px; height:470px; border:solid 1px #CCC; margin:5px; float:left; overflow:hidden; padding:5px;">

<a class="overlay" href=""></a>

<a class="overlayBtns" href="">Quick View</a>



<p style="padding:2px;">Name....</p>
<p style="padding:2px;">Brand....</p>

    <div style="padding:5px;" class="price">
      
      <div class="prod-price"><span class=money>price</span></div>
      	
    </div>

</div>

CSS

.prod-container:hover .overlay{opacity:1;}
.prod-container:hover .fancypics{opacity:0.7;}

.overlay {
  bottom: 0;left: 0; top: 0; right: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  position: absolute;
  background-image:url(or.png);
  background-repeat:repeat;
  display:none;
  
}

.overlayBtns {
  bottom: 0;left: 0; top: 200px; right: 0;
  height: 40px;
  width: 70%;
  margin: auto;
  position: absolute;
  display:none;
  background-color:#CE0404;
  border-radius:4px;
  padding:10px;
  color:#FFF;
  text-align:center;
  text-decoration:none;
  
  
}
.overlayBtns:hover {
  background-color:#AE0000; 
}

JavaScript

$(function() {
    $('.mypro').hover(function() {
        $(this).children('.overlay').fadeIn('slow');
		$(this).children('.overlayBtns').slideToggle();
		
      },
      function(){
        $('.overlay').fadeOut();
		$('.overlayBtns').fadeOut('slow');
      }
   );
});