heihachi88
5/25/2014 - 12:25 PM

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>