Re: Fading CSS sprites using Compass/SCSS

[skweeze]

This doesn’t work. I’m not sure it is possible with the way Compass generates the CSS. This is what it compiles:

.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;
}

Which means the will always have a static hover state.

Having read up, to create a faded hover state using sprites I would need to mark up my button like so:

Some Text

Then add the following SCSS/CSS.

a {
position:relative;
display:block;

&:hover span {
@include opacity(1);
}
}
span {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
@include transition-property(opacity);
@include transition-duration(.5s);
@include opacity(0);
}

This lets us fade out the sprite but to get it to work properly we would need to remove the :hover state in the CSS that Compass spits out which is not possible.