Creating a Rollover Effect with CSS
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
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.