Question

Using a method I’ve done before but having issues. Not sure if it’s a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here’s an example of it working successfully: http://minimalpluscreative.com

Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here’s what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.

Help? Some kind of syntax error I’m sure…

HTML:

    <div id="work" class="sub">
        <h3>MUSIC VIDEOS</h3>
        <img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
    </div>

CSS:

.sprite {
        width:140px; 
        height:61px; 
        overflow:hidden;
}
.sprite:hover {
        margin-top:-61px;
}

Answer 1

I’ve never seen this done before except with background images, but I don’t see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.

As was said earlier, it’s hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:

You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what’s outside of the boundaries that div contains. The image element is the image, it doesn’t contain the image, so setting it to overflow:hidden isn’t going to hide andything, and assigning it a width will just resize it, not “crop” it (which is the effect you’re going for). So you’d need something like:

<div id="work" class="sub">
    <h3>MUSIC VIDEOS</h3>
    <a class="sprite" href="#">
        <img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
    </a>
</div>

with this css:

.sprite {
    width:140px; 
    height:61px; 
    overflow:hidden;
}
.sprite img {
    margin-top: 0;
}
.sprite:hover img {
    margin-top: -61px;
}

I suggest you use ‘a’ as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.

I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.