CSS background transitions with image sprites

Sep 18, 2016 CSS

You will start thinking about image sprites, if you see that your website has too many requests just because of some background images. An image sprite can combine many single requests from a browser to the server into one request. We just have to combine our background images into one single image and use the CSS property background-position. It's just getting complicated if you have a transition on the background.

Background transition without image sprites

I made a small example without image sprites just to make clear what result we expect from a background transition with :hover for example. I made a div with a PNG file that contains a red circle as background. If we hover over the element it should slowly turn green.

<style>
    .example1 {
        background: url(red.png) no-repeat;
        width: 200px;
        height: 200px;
        transition: background 0.5s;
    }
    .example1:hover {
        background: url(green.png) no-repeat;
        transition: background 0.5s;
    }
</style>
<div class="example1">
</div>

Image sprites without background transition

The following example will show the general usage of a image sprite without a background transition.

Creating an image sprite

This is the sprite we will use. Just the red and the green circle from above in one image file side by side.

Usage of an image sprite

We just have to specify the background-position. The circle will turn green again if we hover over the div element, but now without the this fading effect.

<style>
    .example2 {
        background: url(sprite.png) 0px 0px no-repeat;
        width: 200px;
        height: 200px;
    }
    .example2:hover {
        background: url(sprite.png) -200px 0px no-repeat;
    }
</style>
<div class="example2">
</div>

Image sprites with background transitions

We will now combine image sprites with background transitions.

Failing example

Here comes a failing example for images sprites combined with background transitions. The circle changes from red to green if we hover over the element, but not as expected. The position of the background is just changing smoothly. A cool effect, but not the effect that we want.

<style>
    .example3 {
        background: url(sprite.png) 0px 0px no-repeat;
        width: 200px;
        height: 200px;
        transition: background 0.5s;
    }
    .example3:hover {
        background: url(sprite.png) -200px 0px no-repeat;
        transition: background 0.5s;
    }
</style>
<div class="example3">
</div>

After selector as solution

One possible solution for this problem is the ::after selector. We should now have the expected smooth fading effect on the background transition.

<style>
    .example4 {
        background: url(sprite.png) 0px 0px no-repeat;
        position: relative;
        width: 200px;
        height: 200px;
    }
    .example4::after {
        content: "";
        background: url(sprite.png) -200px 0px no-repeat;
        opacity: 0;
        transition: opacity 0.5s;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .example4:hover::after {
        opacity: 1;
        transition: opacity 0.5s;
    }
</style>
<div class="example4">
</div>