I am looking to create a smooth fade in and fade out effect for images within a CSS sprite. The code below currently applies transitions to all images, but I need assistance specifically with fading in and out the images within the CSS sprite.
HTML CODE
<div class="navigation">
<div class="navigation1 process-normal" id="process"></div>
<div class="navigation1 works-normal" id="works"></div>
<div class="navigation1 team-normal" id="team"></div>
<div class="navigation1 products-normal" id="products"></div>
<div class="navigation1 services-normal" id="services"></div>
CSS
.services-active, .products-active, .works-active,
.process-normal, .process-active, .products-normal, .team-normal, .team-active,
.works-normal,.brain,.static,.services,.people,.servies-normal
{ display: block; background: url('allimages.png') no-repeat; }
.navigation1
{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}