fade in/out css sprites http://css-tricks.com/fade-image-within-sprite/
// process block
$('.prcs').hover(function() {
$(this).find('.hidden-icon').stop(true, true).fadeIn();
}, function() {
$(this).find('.hidden-icon').stop(true, true).fadeOut();
});
/* process block */
.prcs {
text-align: center;
}
.animated-icon {
display: block;
height: 250px;
margin-bottom: 15px;
position: relative;
}
.hidden-icon {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.webdev .animated-icon {
background: url("../images/webdev.png") no-repeat center 0;
}
.webdev .hidden-icon {
background: url("../images/webdev.png") no-repeat center -260px;
}
<div class="col-md-4 prcs">
<a class="webdesign" href="#">
<span class="animated-icon"></span>
<span class="hidden-icon"></span>
РАЗРАБОТКА ДИЗАЙНА
</a>
</div>
<div class="col-md-4 prcs">
<a class="webdev" href="#">
<span class="animated-icon"></span>
<span class="hidden-icon"></span>
РАЗРАБОТКА САЙТА
</a>
</div>
<div class="col-md-4 prcs">
<a class="webseo" href="#">
<span class="animated-icon"></span>
<span class="hidden-icon"></span>
ПРОДВИЖЕНИЕ САЙТА
</a>
</div>