CSS Image Hover, No Blinking

Okay, how many of you have ran into the issue with the hover state of an image and it flickers or blinks?

I’ve ran into this issue a few times and a great way to fix this is to use one image that has both the off and on states in a single image file. Let’s get started!

For this example I will be using an image from a previous project of a map, to download the image, right click here and “save link as” or “save image as” to your computer.

Step 1.

First open the image in Adobe Photoshop.

Step 2.

Next we need to create a hover state for this image so when a user mouses over the image there’s an indication that the button is active. To do this, we need to duplicate the image layer. Make sure the layer is selected and then hit Ctrl + J. Then double-click on the new layer and rename it to “hover”.

Step 3.

So for this next step we want to add some sort of hover effect to the image so that it looks active. First create a new layer in your layers palette by hitting Shift + Ctrl + N. Next make sure your “hover” layer is selected and using your Marquee tool make a selection like the one in the image below. Make sure that you do not select the stroke/outline of the image because we want that to stay the same color.

Step 4.

Select the Paint Bucket Tool, have your foreground color set to white and in the settings at the top navigation set the opacity to 35%. Then fill in the selected area by clicking inside it.

Step 5.

Now merge this layer with the “hover” layer by hitting Ctrl + E.

Step 6.

The next thing we want to do is double the height of the canvas size to make room for having both the regular and hover states of the image on the canvas at the same time. So either select Image>Canvas Size or use the keyboard shortcut Alt + Ctrl + C to open the “Canvas Size” Dialog Box. Since the height of the image is 110 pixels we want to double that so set the new height to 220 pixels. Also, in the Anchor section select the middle square in the bottom row. This will make the canvas add space only to the top of the image.

Step 7.

Next make sure you have the Move tool selected and select the “hover” layer. Then with your keyboard use your up arrow key to nudge up the “hover” layer till it lines up with the top of the image.

Step 8.

Now select File>Save for Web and save your file as “terminalWidget.gif”. Now you are done with Photoshop and we can start using some HTML and CSS!

Step 9.

Below is what the HTML code will look like. We have an anchor tag wrapped in a div tag with an id of “LocateTerminal”.

Step 10.

After we have our HTML, the last thing we need to do is to set up our CSS for the different states of the button. Remember the original image’s height? It was 110 px and we’ll use that height in our CSS declaration for our #LocateTerminal a id’s width. Also notice that we have the background image set to our terminalWidget.gif image and we have the background position set to 0 and -110px. This will only allow the bottom part of our image to show while hiding the hover state section of the image.

Then in the next CSS rule for the id #LocateTerminal a:hover we simply use the background selector with the same image but this time we set the background position to 0 0. So now when a user hovers over the image, the on state will be shown thanks to the wonderful magic of CSS!

To see an example of this button’s functionality in action click here.

That concludes this tutorial. Thanks for reading through it and visiting us. Stop back again soon!

Happy Trails!

- Dan O.