CSS Sprites w/out Using Background Images

CSS Sprites w/out Using Background Images

Tags: Beginner
Recently I was working on a client site and he wanted a hover effect on some of the affiliate banner ads. The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the access to update his affiliate banners using WordPress, and the simplest thing was to let him just upload his own images and put the URL in a custom field. No CSS tweaks involved, just what he needed.

What’s the Downside of CSS Sprites?

For this situation, there were a couple issues that I was not comfortable with:

1. CSS Sprites requires basic CSS Knowledge. I didn’t want the client going in and potentially breaking his own site.
2. The more affiliate banners, the more class names you will need to create. If we had 20 banners, we will have 20 unique class names. Being the picky front-end ninja that I am, this didn’t sit well with me.

Try the Demo

As you can see below, these are not background images. Just your typical <img /> tag that has been masked with a little bit of CSS.

The Solution

If you really think about it, this technique is very simple and can be quickly achieved. Lets take a look.

HTML

We keep the markup nice and simple by only using the elements that we need. We use the <a> as the mask, and have our <img /> tag the one that shifts from one state to another.

<div class="affiliates">
    <a href="#"><img src="rokkan.gif" alt="" /></a>
    <a href="#"><img src="1md.gif" alt="" /></a>
    <a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>

CSS

Similar to how the regular CSS Sprites work, we specify the exact width and height of our sprite dimensions. Adding an overflow: hidden; allows us to achieve the masking effect by hiding anything that spills out of its specified boundaries.
To show the hover state, we simply add a negative top margin of the same height as the visible sprite area. Take a look at the height and margin-top in the code below.

.affiliates a {
    width: 204px; height:182px; 
    overflow: hidden;
    float: left;
}
.affiliates img {
    border: none;
}
.affiliates a:hover img {
    margin-top: -182px;
}

Extra Step – CSS3 Transitions

Lets take this a step further and have some fun with the new hot topic: CSS3!

Try the CSS3 Demo

*Note that CSS3 Transitions only work for Chrome, Safari, and Opera at this time. It will be available for Firefox when version 4 is released. Learn more.

HTML

Same markup as above! Don’t change a thing.

<div class="affiliates">
    <a href="#"><img src="rokkan.gif" alt="" /></a>
    <a href="#"><img src="1md.gif" alt="" /></a>
    <a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>

CSS3

Take our existing CSS and add the following lines in red. Notice that the default image has a margin: 0; and when hovered the margin-top: -182px; is applied. When applying CSS3 transitions, it will determine its animations from its default state to its hovered state.

.affiliates a {
    width: 204px; height:182px;
    overflow: hidden;
    float: left;
}
.affiliates img {
    border: none;
    margin: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
    margin-top: -182px;
}

Browser Support?

CSS3 Transitions only work for Chrome, Safari, and Opera at this time. It will be available for Firefox when version 4 is released. Learn more.

How Does it Work?

Here is a breakdown of the transitions. Take a look at the links below for further explanations on each browser specific properties.

• Webkit CSS3 Animations
• Firefox CSS3 Animations
• Opera CSS3 Animations