Re: Fading CSS sprites using Compass/SCSS

[skweeze]

Pretty much yeah. Fade in on hover, fade out on roll out. I was trying to use this tutorial to get to what i wanted. https://css-tricks.com/fade-image-within-sprite/. Removing the hover class from the span will do nothing as it will mean the span has no hover state image to fade into. Whatever happens because Compass is generating this:

.icons-social-sketch-twitter {
background-position: 0 -925px;
}
.icons-social-sketch-twitter:hover,
.icons-social-sketch-twitter.social-sketch-twitter_hover,
.icons-social-sketch-twitter.social-sketch-twitter-hover {
background-position: 0 -1015px;
}

The .icons-social-sketch-twitter:hover will always be applied to the main a tag element on rollover without a transition. I’m not sure there is a way round it. It’d be great if there was but I cannot for the life of me see it.