Creating a Rollover Effect with CSS


The effect of rollover is the one that exchanges one image for another when the user passes the mouse over it. When well used, this feature can increment a page or a site in a meaningful way. The most common way of achieving this effect is through a code in JavaScript, but it is also possible to to reach this result only with CSS (Cascading Style Sheets). This is what you’ll see in this quick tutorial. Before you proceed, know that it is important to have some knowledge of HTML or even CSS so that the procedure give right.

Creating the rollover effect

The advantage of using the rollover effect of this technique is that eliminates the use of the preload, that is, the image that will appear when the user triggers the event does not need to be loaded previously for the effect to work the way you want.

Step 1: create your image

The main difference between the rollover with CSS and the effect with JavaScript is here: instead of two pictures, you has only one, containing the image in its two states, which will have the position changed when the user triggers the event.

Using the image editor of your preference, create your image as shown in the figure below – in the upper half of the image as it will appear on the site; in the bottom half, the image that will appear when it happens the rollover effect.

Step 2: create your HTML file

Let’s create the HTML file:

Note that we do not use the tag <img> to display our image, and yes a link. This is important, because this way, we guarantee that even the user with the images or the CSS disabled in your browser you will be able to access the link without problems.

Step 3: create your CSS file

With the CSS we’ll turn the link into an image:

Explaining the code: the attribute width: 207px; defines the width of the image. Remember that in the first step, we define the two states of the image in the same file; therefore, we assign to the image only half of their height (in this example, 19 pixels: height: 19px;), since the bottom part of the “exchange of place” with the top part of it at the time that the rollover effect to occur. This makes it clear that it is important to accurately measure the size of your image to split it exactly in half, otherwise, the effect you can have failures.

In turn, the attribute overflow: hidden; defines that the link get exactly the size you set, and any “leftover” the image will be cropped.

However, the trick is the same in the attribute background:. Notice in the following line:

She defines the background image and the positioning of her: aligned at the top, to the left, and without repetition.

The attribute display: block;that comes immediately below, turning our link on a “block”, and the text-indent: 10000px; hides the text of the link.

Finally, the attribute

defines that, by passing the mouse over the image, it will align by the base and to the left, showing just the bottom half file.

After you created the code, save the CSS file (or implement in the page HTML itself, if you want to). In this example, the file received the name of the rollover.css. Notice that in the HTML code in the 2nd step, this file is “called” in the fourth line.


If you followed the steps correctly, you should have realized how it is easy to create the rollover effect. With a little practice, you can apply the same idea in various elements from the same page. With the same code and a little imagination, it is also possible to use this effect in menus, buttons form and virtually any other elements of your HTML page.

Creating a Rollover Effect with CSS 1

Creating a Rollover Effect with CSS
Rate this post

You may also like...