5 Easy Rollover Effects for Image Links Using CSS

Posted by Libby Fisher on Thursday, October 21st, 2010 in Questions and Answers, Troubleshooting and Problem Solving, Useful Scripts and Codes, Web Design

Today, I want to share with you a few very simple ways to add rollover effects to images, buttons, and other graphics that are used as links in a web page. This increases usability and functionality by making it easy for visitors to navigate your website.

If you are using images or graphics as links, chances are that you are already using this code to remove all unsightly borders from the image links:

a img {border:none;}

This is great – except for when you want to add an effect when the button or graphic is rolled over. Here are some easy ways that you can do just that:

Display a different image on rollover – view demo

First, create the two images that you are going to use:

Then, combine the two into one single image:

Now, add this to your stylesheet:

 display: block;
 width: 137px;
 height: 42px;
 background: url("buttons.PNG") no-repeat 0 0;

 background-position: 0 -65px;

#button span
 display: none;

And add this to the body of your web page, where you want the image to appear:

<a id="button" href="#" title="Button"><span>Button</span></a>

Obviously, you will need to edit the name and URL to those of your specific image, and edit the “background-position” and height and width attributes to fit your own image.

Add a border to the image on rollover – view demo

Add this code to your stylesheet:

a:hover img {border:1px solid #FFF;}

Underline on hover – view demo

Use this:

a:hover img {border-bottom:3px solid #000;}

Add shadows to the image on rollover – view demo

(works in Internet Explorer too!)

a:hover  img {-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

Add or change a background color on rollover – view demo

These codes will create a background with rounded borders behind your image links that change color when you roll over the images:

a img {
padding: 5px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

a:hover img {    color: #fff;
padding: 5px;
background: #111;
border: 1px solid #000;
border-left: 1px solid #353535;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

So there you have it – five easy ways to style your image links. Let me know if you have any questions, need help with any of these codes, or have suggestions for other ways to add effects to image links.


1 Comment

  1. Carla says:

    Thank you for sharing those, it’ll be really helpful for me.

  2. Leave a response