CSS Background Rollover

Looking to add a little style to your image links? Let’s use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we’ll be looking at adding this style to affiliate buttons.

STEP ONE

First, we have the html for the actual affiliate button to show up:

1
2
3

<div>
 <a href="#"><img alt="" src="#" /></a>
</div>

Basically, we wrap the linked image in a div and define a class of affiliate. Make note that the width of the image is 88 pixels and the height is 31 pixels.

STEP TWO

Since we’ll probably want to use this style multiple times on a page, that’s why I created it as a class. Here’s the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.affiliate img {
padding: 5px;
border: 0;
}
.affiliate {
float: left;
width: 98px;
height: 41px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
display: block;
}
.affiliate a:hover {
background-color: #CCCCCC;
display: block;
}

We add 5 pixels of padding around the image. That means the width will now be 88 plus 5 on both the left and right which equals 98 pixels. The height will be 31 plus 5 on both the top and bottom which equals 41 pixels. Making the border equal to zero removes the blue border around a linked image.

We float each div left so they line up next to each other. However, we don’t want them too close. So we add 10 pixels of margin to the right and bottom to push them away a bit.

Lastly, we add a background color to the hover. Enjoy!

Share This: