JSFiddle - React, Tailwind, and code Playground

HTML

<div class="procduct">

    <div class="image">
	    <img src="http://4.bp.blogspot.com/-shQJ6WRgHho/UoejyGXMMiI/AAAAAAAAC2c/CZ-Ql_kaqWw/s1600/VNLIVES.NET-HTML-CSS-PRODUCT-TEMPLATE.png"/>                
    </div>
    <div class="overlay">
    	<div class="bt1">BT 01</div>
	    <div class="bt2">BT 02</div>
	    <div class="clear"></div>
    </div>      

</div>

<div class="procduct">

    <div class="image">
	    <img src="http://4.bp.blogspot.com/-shQJ6WRgHho/UoejyGXMMiI/AAAAAAAAC2c/CZ-Ql_kaqWw/s1600/VNLIVES.NET-HTML-CSS-PRODUCT-TEMPLATE.png"/>                
    </div>
    <div class="overlay">
    	<div class="bt1">BT 01</div>
	    <div class="bt2">BT 02</div>
	    <div class="clear"></div>
    </div>      

</div>

CSS

.procduct {
	margin: 5px;
	padding: 5px;
	height: 150px;
	width: 150px;
	border: 1px solid #F00;
	float: left;
}
.image {
	z-index: -1;
	position: absolute;
}
.overlay {
	padding-top: 65px;
	padding-left: 17px;
    display:none;
}
.procduct:hover .overlay {
    display:block;     
}
.procduct:hover .image {
    opacity:0.50;    
}
.bt1 {
	float: left;
	margin: 5px;
	padding: 5px;
	background-color: #0F0;
}
.bt2 {
	margin: 5px;
	padding: 5px;
	float: left;
	background-color: #F69;
}
.clear {
	clear: both;
}