Cacher is the code snippet organizer for pro developers

// typically used on magento products for additional actions on rollover of image
<div class="product-img">
	<div class="contain"><img src="product.png" width="200" height="200" alt="xxx"></div>
	<div class="product-img-hover">
		<div class="center">
			<button class="button"><span><span>Quick View</span></span></button>
			<div class="product-details"><a href="#">View Details</a></div>
		</div>
	</div>
</div>


.product-img {
	position: relative;
	max-width: 200px;
	display: block;
	margin: 0 auto;
		
	img {
		width: 100%;
		height: auto;
	}
	
	.contain {
		max-width: 200px;
		max-height: 200px;
		overflow: hidden;
	}
}

.product-img-hover {
	position: absolute;
	top: 0; 
	left: 0; 
	width: 100%;
	height: 200px;
	background-color:rgba(0,0,0,0.7);
	display: table;
	
	.center {
	   display: table-cell;
	   text-align: center;
	   vertical-align: middle;
	}
}

.product-img .product-img-hover {
	display: none;
}

.product-img:hover > .product-img-hover {
	display: table;
}