Traditionally, to make a button or banner change when you hover over it, developers and designers have loaded two separate images — not the most efficient method. The most obvious drawback is that the image would be loaded only when the user hovers their mouse over the image and therefore they don’t experience a fluid, smooth hover effect, which is bad usability.
It also requires you to have two different files that need to be loaded, which means more files to manage, more HTTP requests to process, and more bloat on your site. This can quickly get out of hand if you have a lot of hover-over images on your site.
There must be a better way to approach this! Well, luckily there is a more efficient way, and that’s what we’ll learn in this tutorial.
Instead of having two separate images stored in two different files, you can combine both images within one image — a sprite — and place them next to each other on the canvas; this would mean that instead of loading the image dynamically, when the user hovers, both the static, first, image would be loaded as well as the hover, second, image. To do this we simply combine both the hover image and the normal image and then use some CSS to create a div (or class if you need a hyperlink, which we do in this tutorial), give the background image a width half the size of the actual image file, and then use CSS to make the background image shift to the left when the user hovers over it.
Part One: Preparing Your Image
Firstly, you need to prepare your image so that it will display correctly when you hover over it and shift the image to left — the key is to make the image completely symmetrical. For this tutorial, I will be using Apple’s “Available on the App Store” badge and having the image display the price when the user hovers over it.
1. Open your original, static image in Photoshop (you can follow along easily in Fireworks if you prefer).
2. Go to the menu and open Image – Canvas Size (or press Option + Command + C) and then double the width on your canvas — so in my case it would go from 200px to 400px. However, I prefer to add around 6 extra pixels (or any even number of pixels) as this allows space between both images and makes it look tidier. So, it would go from 200px to about 406px.
3. Select the layer that your image is placed on and then move it to the leftmost part of your canvas.
4. Duplicate the layer that contains your image and move the duplicated image to the rightmost part of your canvas and you should have two identical copies of your image side by side with the optional gap in the middle.
5. Now, you need to apply the style and changes to your secondary image that will display when the user hovers over it – so, for instance, double click the secondary image’s layer to bring up the Layer Style window.
6. You can add a color overlay to your image to give it a tint when the user hovers over it, so navigate to color overlay in the left sidebar of the window and check the box next to it.
7. Choose a color, in my case it’s black and give it a reasonable tint – I usually go for 80% opacity. This means that there’s enough tint to tell that it has changed but also allows the user to see the underlying image perfectly fine.
8. Once you’ve got a nice color going and applied the overlay, press Enter or OK.
9. Now, you have two images, one that will be displayed normally (the image on the left) and one that will be displayed when the user hovers over the original image (the one on the right). Now, you can add something to go on top of the hover image. Text is usually a good option.
10. Create a new layer above all the other layers and select the Text tool (or press T) and select an area above your hover image and start typing.
11. Now, add some additional formatting like a fancy font, change the size or maybe the color.
12. Save your image with an appropriate name (for this tutorial, it’s app-store-badge.png) in your desired location as a PNG file.
Part Two: Applying HTML and CSS
In this section, we add the actual HTML and CSS that will make the image work and move when the user’s mouse hovers over it.
1. Open up your text editor, for this tutorial I will be using Chocolat — my favorite text editor despite the fact it’s still in beta — and create a HTML and CSS file in the same directory (the same directory that contains your image).
2. In your HTML file, create the basic structure of a HTML document (the HTML5 structure is below):
<link rel="stylesheet" href="main.css" type="text/css" />
<title>CSS and HTML Hover Image</title>
<a class="hover-class" href="http://go.affogato.co/"> </a>
3. In this file, I’ve created an a tag in the body that will display the image as a link as well as perform just as if it were a div — it’s up to you as to whether or not you would like it to be a link or not and I’ve also linked the CSS file (main.css) within the head tag.
4. Now, if we switch from the HTML document to a CSS file, what we’re going to do is create the class and add the style to it. So, in your CSS file, add a new class as you can see, it is defined as .hover-class, and add the following code:
background: url("app-store-badge.png") no-repeat;
5. Within the class, specify the height of the image and width of the first, original image because this is all we want to see at this moment – specify your image and ensure that there’s no border (to prevent Internet Explorer applying a border around the image) and that the display is set to block (this means there’s a small amount of white space above and below as well as preventing other HTML elements sitting next to it).
6. So, if you open up your HTML document, you’ll find that your original image is displayed however nothing happens when you hover over it — what’s up with that?
7. We need one final piece of CSS code to give the class something to do when a mouse is detected over it. We need to move the location of the background image to the right so the whole image shifts over and hence, displays the rest of your image. In your CSS file, add the following lines to make the background image shift revealing the hover image when it’s activated:
8. Providing you’ve done everything correctly and aligned both images correctly, then when your mouse hovers over the image in your browser, it should change and move the position of the background image revealing what you wanted it to.
Recall when we placed both images within the Photoshop document and aligned them symmetrically? This is where many people go wrong — if both images are not symmetrical, they will appear to actually move to the left or right when you hover over them, which doesn’t look professional and is something you should look out for.
Essentially, the purpose of this is to make a website more efficient and user-friendly as the images are loaded beforehand with fewer HTTP requests, causing the effect to work more smoothly and the page to load faster.
iOS, Mac and web developer and designer.