.block {
width: 672px;
height: 314px;
cursor: pointer;
margin: 10px;
overflow: hidden;
border-radius: 9px;
}
.block img {
display: block;
}.gradient {
background: -moz-linear-gradient(top, transparent 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
background: -o-linear-gradient(top, transparent 0%, #ffffff 100%);
background: -ms-linear-gradient(top, transparent 0%, #ffffff 100%);
background: linear-gradient(top, transparent 0%, #ffffff 100%);
}<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.item { width: 140px; padding: 0 20px;}
<li class="infoItem">
<div class="img" style="background-image: url('img/bulb.png');"></div>
<div class="text">текст текст текст текст</div>
</li>.infoItem .img {
width:80px;
height:80px;
margin:0 auto 20px;
background-position: 0 0;
background-repeat: no-repeat;
}
.infoItem:hover .img {
background-position: 0 100%;
}