JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-container">
		<div class="product-image"><img src="http://placehold.it/200x200">	
        <div class="overlay">PRICE</div>
</div>

CSS

.product-container{
    position:relative;
    width:200px;
    height:200px;
}
.overlay{
    display:none;
    position:absolute;
    background: red;    
	top: 0;     
	left: 0;     
	width: 100%;     
	height: 100%;
    opacity: 0.6;     filter: alpha(opacity=60); /* For IE8 and earlier */;
    z-index: 9999;
}

.product-image img:hover + .overlay {
    display:block;
}