Grow your CSS skills. Land your dream job.

Fading CSS sprites using Compass/SCSS

  • # November 12, 2012 at 10:01 am

    I am using the built in sprite making capability of Compass to make a sprite sheet of icons. Compass creates a load of class names so that the hover state works automatically without the need to write any CSS/SCSS. Does anyone know if it is possible create a faded hover state using generated classes in Compass.

    # November 12, 2012 at 10:22 am

    just create a seperate class for the hover state and add that into the class tag where ever you use the sprite saves playing with the sprite css directly. something like this

    .bob:hover { opacity: 0.5; }
    And in your html

    # November 12, 2012 at 11:34 am

    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.

    # November 12, 2012 at 11:52 am

    Can you link the doc’s you read up on cus compass doc’s do not show anything related to a mixin for sprites with a hover state, Also what version of compass are you using and can you include a copy of your sass/scss code you using to generate the sprites.

    # November 12, 2012 at 12:48 pm

    Here is the link from the Compass website explaining about magic selectors: http://compass-style.org/help/tutorials/spriting/magic-selectors/
    I am using the latest version of Compass (v 0.12.2)
    The code I am using is:

    $icons-spacing:20px;
    @import “icons/*.png”;
    @include all-icons-sprites;

    Basically, adding an image with “_hover” at the end automatically adds the :hover state to the selector.

    # November 12, 2012 at 1:59 pm

    I seriously don’t know how i missed that page i even went through the doc’s text searching hover, bah. Hold on i have a feeling this can be resolve with a little use of extend im not thinking clearly today been dealing with browser specific formatting issues.

    # November 12, 2012 at 2:30 pm

    Ok the more i read this post the more I think i’ve overshot slight and should just say

    Some Text

    the social-sketch-twitter_hover in the span class tag’s is basically setting a permanent hover state on the span tag if your wanting it to only actually be in the hovered state when u hover over the span remove that class.

    Correct me if im wrong but as I read it atm you have a link which has the background set to the icon sprite, inside that you have some link text and span with the background set to the sprite and the sprite in a permanet hover (atm).

    What i think you want is a link with some text with the sprite icon next to that text so when you hover over that sprite or text the sprite changes to the sprite_hovered image and fades outslightly?

    # November 12, 2012 at 4:47 pm

    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. http://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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".