Background image hover

Knowing what you know about the background image rule, you can use aspects of it to combine with the hover interaction to show an image (an image button in this example) to react when hovered over.

The technique involves creating all the necessary states of your image button (hover, active, focus) in one file, commonly known as a sprite. See the side bar for how the original image looks before we work with it.

When we create the button, we make sure that only one state is visible – the static version of the button – and use CSS to fix the size of the element, thus hiding the rest of the image. This technique enables all the states to be loaded at once, rather than as individual images which would lead to delays in showing the different states as they are interacted with.

Define your element


									
										<a href="enter.html" class="enterNow">
										Enter now
										</a>

The underlying markup.

We use an <a> tag as we expect people to be taken to the site's enter page (at least for this example) and write what the image will say (and replace) in between the tags. We'll hide this text, but it must be there to assist those that view our site through assistive technologies or choose to disable styles. Semantics is everything.

The CSS


									
										.enterNow {
										background-image: url('images/nt-header-enternow.png');
										background-position: 0 0;
										background-repeat: no-repeat;
										display: block;
										height: 119px;
										text-indent: -9999em;
										width: 119px;
										}
										.enterNow:hover {
										background-position: 0 -119px;
										}
										.enterNow:focus {
										background-position: 0 -238px;
										}

The CSS that controls the layout.

Before we dive into the background rules, note the rule called text-indent. It has a large negative number attached to it, set in ems. This value means the text won't be visible (our image makes up for that) and instead is positioned way off screen, to the left.

Take a look at the rules applied to the hover and focus states. Notice how we only write background-position.

As we're only moving the position of the image within its container, we don't need to duplicate, or override any other rule for the parent (enterNow) class. If we were to duplicate the background-image rule, each time a user interacts with it the sprite would get reloaded. This is unnecessary and if present would only add to page load times.

Note: Note how we write out each background- rule individually. This helps us to modify the background-position for each interaction state and avoid the need to reload the image and repeat unnecessary CSS rules, as already explained.

Here's how it works: background-position has two digits/values. The first digit signifies the X axis, the second digit the Y axis. As our sprite is constructed along the vertical axis (each state is stacked beneath the previous one) we only need to change that digit's value. It's a negative number because we need to bring each state into view from the bottom up.

This technique works because on each interaction the change is made instantaneously, giving the appearance of a visual switch.

In action

Hover your cursor over the image, or use your keyboard to interact with it. Those using fingers (and a touch-enabled device, because mind-controlled CSS hasn't been invented yet) should experience the hover effect when touching it...

Enter now