Image Links With CSS

This tutorial uses Cascading Style Sheets (CSS) to create a rollover image link. When a user mouses on the image, a text message appears. Use this technique on your website to provide users with useful information about a link before they click it. We will use only HTML and CSS for the effect, making this handy trick optimum for search engines.

This is an intermediate level tutorial that assumes you understand basic HTLM/CSS. The technique has been successfully tested in the following browsers: IE7+, and Firefox 3.5.x for Windows – and Safari 4+, Firefox 3.5.x, and Google Chrome for Macs. The end result is below:

Step 1: Preparing The Files

Download and unzip the tutorial files by clicking here. You should now have a folder called “image-links-with-css” – inside this folder is a sample image and two html files, “start.html” and “end.html”. Open the start.html file with your preferred editing software, and we are ready to begin. Refer to end.html at any time to see what the final file should look like.

Step 2: Setting Up the HTML

Paste this html code between the body tags of your start.html

<a class="container" href="#">
<img src="sample.jpg" width="400" />
<span>Rollover text goes here.</span>
</a>

The “a” tag can have any unique class name. I used “container” because the tag acts as container that holds both the image and the rollover text. Also, notice how the rollover text is wrapped in “span” tags. This is important for the next steps.  You can replace the rollover text with a message of your choice.

Step 3: Style the Container

Paste the following  between the “head” tags of start.html (just below the “title” tags).

<style type="text/css">
a.container {
	display: block;
	width: 400px;
	height: 160px;
	overflow: hidden;
}
</style>

The container is set to display as “block”. This is important because link tags are “inline” elements by default, and for this technique to work properly, the container must behave as a “block” element. Click here for more on the CSS display property. Also, the width and height properties above match the dimensions of our sample image exactly. When you put this technique to use, make sure the width and height in your CSS match the image you are using. Finally, the “overflow” property is set to “hidden” which hides the rollover text.

Step 4: Style the Image and Block the Text

Paste these styles between the style tags:

a.container img {
        border: none;
	display: block;
	margin: 0 0 30px 0;
}

a.container span {
	display: block;
	padding: 10px;
}

The border is set to “none” because most browsers add a border to image links by default. Display is again set to “block”. Note the four values for the margin property. They read as follows – top, right, bottom, left or TRBL (kind of looks like “trouble”, thats how i remember it). So, our image has 30px margin on the bottom and no margins on all other sides. Also, the “span” tag that holds the rollover text is set to “block” and padded out a bit.

Step 5: Create the Rollover Effect

Paste this style with the others:

a.container:hover img {
	margin: -160px 0 30px 0;
}

This changes the margins of our image when we “hover” over the link. The image still keeps the 30px margin on the bottom, but it now has a NEGATIVE margin on the top equal to the height of our image. If you preview your work thus far, you’ll see that the image is indeed replaced by text, BUT the text isn’t all that nice looking. So we’ll add one more step to style the text.

Step 6: Make the Text Pretty

Here is the final style to paste:

a.container:visited, a.container:hover {
	font-family: "Trebuchet MS", sans-serif;
	color: white;
	background-color: black;
	text-decoration: none;
}

I set the text color to white, the background to black, removed the underline, and changed the font. You can do what you want here – whatever suits your taste. The important part is that we style both the “hover” and “visited” states of the link so the text will always look how you want.

Conclusions

This a simple, subtle way to add some stylish rollover images to your site – and it is very friendly to both your visitors and the search engine robots. As always, post any questions or comments below. Thanks for reading.