CSS Rollover Image Effect - Change Image on Hover

ads space

Rollover image is a design feature where an image changes when your mouse hovers over it. Think of a light bulb that turns on and off when you move your mouse cursor into that area of a page. When a page is loading, rollover images are preloaded into it to ensure that the rollover effect is displayed quickly.

This used to be implemented using JavaScript, which is fairly easy with just a small amount of script involved. To make rollover images functional, onmouseover and onmouseout attributes are used to a link tag. The code is then added to a blog gadget or into a new post. It proved to have a number of disadvantages, however, which is why many web developers are using a CSS-only method.

How to create a rollover image using CSS

Here is how to implement a rollover image using CSS. Before getting started, we need to have two images ready, one in its initial/static state as well as its rollover state.

The Image

Place both the static and rollover image in one file and make sure that the rollover image is placed on top of the static one. To achieve the rollover effect, we’ll write a code to display the static image and crop the hover image, so that only one image state is displayed at a time.

For this tutorial, we’ll use the following as a CSS rollover image.

Creating an HTML Anchor Element for our Image

Instead of adding the image file in a tag, we’ll display it as a background image of an (anchor) tag. Here’s the HTML that we need to add:

ads space