Question

My current project involves setting up a bunch of sidebar links, such that the finished design looks like this:

The envelopes are supposed to move and overlap (i.e., change z-index), depending upon which icon/text is currently has :hover state.

I thought each would be a separate PNG file, but I’ve been given a sprite that looks like this:

Any suggestions how I could achieve this? Normally I’d just change the background position of the list elements each piece of text is in, but I don’t think this is possible given the overlapping nature of these. Does he just need to export it differently?

Many thanks…

Answer 1

To me it looks like that sprite would work perfectly. The left most image is for when book is hovered, second image for twitter, third for facebook, forth for email. I’m guessing the last one is just the default state. Its tricky to make this work with pure css and :hover (but possible!), however, it would be extremely easy with javascript.

For the pure css solution, the div with the sprite would have to be the child of all the text elements, so you could change the background based on :hover on the parent (the text). If this isn’t clear, I can make you some example code.

Edit:

Its not perfect, but its a proof of concept.

JsFiddle: http://jsfiddle.net/jp6fy/

CSS:

#side{
    position:relitive;
    height:341px;
    width:250px;
}

#link1{
    top:0;
}

.link{
    position:absolute;
    left:0;
    top:85px;
    height:85px;
    padding-left:160px;
    width:90px;
}

#image{
    position:absolute;
    top:-255px;
    left:0;
    z-index:-1;
    background:url(https://i.stack.imgur.com/I2Y4k.png) -720px 0;
    height:341px;
    width:150px;
}

#link1:hover #image{
    background-position:-540px 0;
}

#link2:hover #image{
    background-position:-360px 0;
}

#link3:hover #image{
    background-position:-180px 0;
}

#link4:hover #image{
    background-position:-0px 0;
}

HTML:

<div id='side'>
    <div class='link' id='link1'>
        email
        <div class='link' id='link2'>
            facebook
            <div class='link' id='link3'>
                twitter
                <div class='link' id='link4'>
                    book
                    <div id='image'></div>
                </div>
            </div>
        </div>
    </div>
</div>