JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-container">
	<div class="product-img-box">
		 <a href="#"class="product-image"><img src="http://placehold.it/200x200"></a>
	</div>

	<div class="overlay-box">
        <div class="overlay-infos">
           <h2 class="product-name"><a href="#">1920s Jade Enamel Ring</a></h2>
                <div class="price-box">
                           <span class="regular-price" id="product-price-903">
                            <span class="price">$925.00</span></span>

                 </div>


         </div>
     </div>
</div>

CSS

.product-container {
    width:200px;
    height:200px;
    position:relative;
}
.product-img-box{position:relative; display:block; background: #f5f5f5;
width:200px;
    height:200px;}

.overlay-box {
    display: none;
    background: #424242;
    position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;
    opacity: 0.6;     filter: alpha(opacity=60); /* For IE8 and earlier */;
}

.overlay-infos {
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    width: 200px;   
    height: 50px;
    text-align: center;
}
.product-container:hover .overlay-box {
    display: block;
}