edit

fork of http://jsfiddle.net/npofopr/a9dhwgjt/3/

HTML

<section class=content>

<div class="wrapg">
    
<div class=gallery>
<a href="#">
<img src="http://www.y8lovegames.com/fog/image/adventure/ygames-jogo-do-anans100x100.jpg" alt=""><strong>Ананас</strong></a>
<span class=description>Ананас - вкусный и полезный. Растёт вместе с ....</span>
<a href="#" class=cart>Купить</a>
</div>
        
<div class=gallery>
<a href="#">
<img src="http://www.y8lovegames.com/fog/image/adventure/ygames-jogo-do-anans100x100.jpg" alt=""><strong>Ананас</strong></a>
<span class=description>Ананас - вкусный и полезный. Растёт вместе с ....</span>
<a href="#" class=cart>Купить</a>
</div>
        
<div class=gallery>
<a href="#">
<img src="http://www.y8lovegames.com/fog/image/adventure/ygames-jogo-do-anans100x100.jpg" alt=""><strong>Ананас</strong></a>
<span class=description>Ананас - вкусный и полезный. Растёт вместе с ....</span>
<a href="#" class=cart>Купить</a>
</div>

</section><!--------end content -------->

CSS

section.content {
	position: relative;
    padding: 50px;
    
}

img {
	border:0; /*for IE9*/   
}

div.gallery {
	display: inline-block;
	width: 140px;  /* ширина блока с товаром */
	height: 250px; /* высота блока с товаром */
	position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    background: #fff;
    margin: 0;
    -webkit-transition: all 0.6s ease-in-out 0s;
    -moz-transition: all 0.6s ease-in-out 0s;
    -o-transition: all 0.6s ease-in-out 0s;
    -khtml-transition: all 0.6s ease-in-out 0s;
    transition: all 0.6s ease-in-out 0s;
	 
}

div.gallery:hover {
    z-index: 6;
    border: 1px solid green;
    margin: -17px;
    padding: 16px;
    padding-top: 0px;
    -webkit-box-shadow: 0 0 15px #bababa;
    -moz-box-shadow: 0 0 15px #bababa;
    -o-box-shadow: 0 0 15px #bababa;
    -khtml-box-shadow: 0 0 15px #bababa;
    box-shadow: 0 0 15px #bababa;

}

div.gallery img {
	display: block;
	margin: 0 auto;
	padding: 0;

}

div.gallery strong {
	display: block;
	padding: 6px 6px 6px 20px;
	text-align: left;

}

div.gallery span {
	display: block;
	text-align: left;
	padding: 0 20px 6px 20px;
	overflow: hidden;
	height: 80px;
	line-height: 16px;

}

div.gallery a.cart {
	display: block;
	padding: 5px 10px;
	margin-left: 20px;
	margin-right: 20px;
	text-align: center;
	background-color: #D3D3D3;
    -webkit-box-shadow: 0 -2px 8px 1px #FFf;
    -moz-box-shadow: 0 -2px 8px 1px #FFf;
    -o-box-shadow: 0 -2px 8px 1px #FFf;
    -khtml-box-shadow: 0 -2px 8px 1px #FFf;
    box-shadow: 0 -2px 8px 1px #FFf;
    
}

div.gallery a.cart:hover {
	background-color: #B7B7B7;
}

div.gallery p {
	margin: 0 auto;
    text-align: left;
	padding: 0;

}

div.gallery:hover p {
    margin: 0 auto;
    
}