CSS Style Image Rollovers Effects Using HTML Image Links

Updated on 12 Jan 2012,
Published on 30 Jun 2008

HTML image links can be used along with CSS styles to show Image Rollovers effects. HTML image links can be created using HTML <a> anchor tags by using background-image CSS style that could be handled through hyperlink CSS Pseudo Classes such as a:link, a:active, a:visited and a:hover. Image Rollovers Effects can be controlled using a:link and a:hover CSS classes. Here we will define the default CSS selector for HTML anchor <a> tag i.e. a { } for the common style requirements for all the states of HTML hyperlink <a> such as font-family, color, font-size, font-weight, text-decoration to show or hide the underline of hyperlinked text.

We will use "none" value for text-decoration CSS style property to show the link text without underline. Height and width CSS style properties will define the height and width for the hyperlink anchor <a> tag to display the image in this specified area. You can set these properties according the height and width of the image you want to display initially as the background of the hyperlinked text. As a background image of hyperlinks you must use image patterns that can be displayed in a repeat or tiled behavior so that if the link text increases, the image behind the text could cover the white space without any mismatched joints in image edges. CSS display style property must have value equal to "block" to enable the hyperlink anchor tag not to shrink according to the font size of link text.

Example Code of CSS style image Rollover Effects using HTML image Links

<html>
<head>
    <title>HTML CSS Example</title>
    <style type="text/css">
        a {
            font-family: verdana;
            height: 30px;
            width: 100px;
            display: block;
            line-height: 30px;
            text-decoration: none;
            font-size: 11px;
            font-weight: bold;
            color: #777777;
            text-align: center;
        }
        
        a:link {
            background-image: url(../images/blue.gif);
        }
        
        a:visited {
            background-image: url(../images/blue.gif);
        }
        
        a:hover {
            background-image: url(../images/green.gif);
            color: #333333;
        }
    </style>
</head>
<body>
    <a href="#">rollover!!!</a>
</body>
</html>

Use the same background image url for a:link and a:visited to display the initial state of image rollover hyperlink. Set the background image url of a:hover of other image will be displayed as the image rollover effect of HTML hyperlink. line-height CSS style property helps in vertical alignment of link text and text-align property enables you to align the text horizontally.

Download the following images to try them with sample code

blue.gif

green.gif

Also read the tutotial: CSS Hyperlink Styles Using Pseudo Classes to learn about the different hyperlink states which can be handled using CSS.

Previous Tutorial

Next Tutorial