CSS Image Flip with text anchor link

Last updated on December 15, 2009. Tags: anchor text, image flip, link hover

This is a little twist in the earlier CSS Image Flip. Instead of a transparent gif, we will use text as anchor to the links. You might find this more useful than the Java Image Flip or the regular CSS Image Flip because text-based links are known to be more search engine friendly.

Similar image flips are found in several websites, usually in the navigation menu; the background images changes into something different when the mouse hovers. An example of such image flip is can be found on my website development firm's website; it is the page navigation menu on top right under my company logo.

However, this effect uses only two images, one under normal condition and one for the mouse hover. Such page menu operates with a slightly different set of codes from what I will discuss in this tutorial. Here, I will discuss how to make a navigation menu in which each link has its own background image and background hover image.

An example of CSS Image Flip with text links is shown below. Click here to see the CSS Image Flip on its own browser window or tab.

The HTML code is shown below. Just like in CSS Image Flip, you should place it anywhere between the <body> and </body> tags.

<div id="loader">
<img src="hover1.jpg"/>
<img src="hover2.jpg"/>
<img src="hover3.jpg"/>
</div>
<div id="iconwrap">
<ul>
<li id="icon1"><a href="#">LinkText1</a></li>
<li id="icon2"><a href="#">LinkText2</a></li>
<li id="icon3"><a href="#">LinkText3</a></li>
</ul>
</div>

The CSS code is shown below. In our sample page, the CSS code is in the header section. However, just like in any webpage with CSS code, you can always move the CSS code to an external file.

body {
padding: 0; margin: 0; border: 0px none;
background: #000000;
font-size:11px;
color:#000000;
font-family:verdana;
font-weight:bold;
}

#loader {
	width: 0px;
	height: 0px;
	background: #000000;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: 0;
	visibility: hidden;
}

#iconwrap {
	width: 470px;
	margin: 0 auto;
	padding: 0;
	border: 1px solid #fafafa;
}

#iconwrap li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 150px;
	height: 30px;
	text-align: left;
	float: left;
	overflow: hidden;
}

#iconwrap li a {
	list-style: none;
	margin: 0;
	padding-top: 10px;
	border: 0;
	width: 150px;
	height: 20px;
	color: #1c1e00;
	text-decoration: none;
	float: left;
}

#iconwrap li a:hover{
	list-style: none;
	margin: 0;
	padding-top: 10px;
	border: 0;
	width: 150px;
	height: 20px;
	color: #effc19;
	float: left;
}

#iconwrap ul {
	margin: 0;
	padding: 0;
	border: 0;
}

#icon1 a {
	background: url('pic1.jpg') center center no-repeat;
}

#icon1 a:hover {
	background: url('hover1.jpg') center center no-repeat;
}

#icon2 a {
	background: url('pic2.jpg') center center no-repeat;
}

#icon2 a:hover {
	background: url('hover2.jpg') center center no-repeat;
}

#icon3 a {
	background: url('pic3.jpg') center center no-repeat;
}

#icon3 a:hover {
	background: url('hover3.jpg') center center no-repeat;
}

Similar to CSS Image Flip, you can separate the "loader" and the "iconwrap" block elements. The "iconwrap" contains the image flip that you actually see (the default images) while the "loader" is an invisible and dimensionless division. It was meant only to ensure that the images that would appear when the mouse pointer hovers (the hover images) are already in the cache. Thus, the image will flip instantly without waiting for the hover image to download.

Now, let us examine how the image flip works. The attributes common to each flipping image is assigned to #iconwrap li, #iconwrap li a and #iconwrap li a:hover (list, link and hover under the "iconwrap" block element respectively) in the CSS code. Under #iconwrap li, we set its width and height to be 150 pixels and 30 pixels respectively. The margin and padding are all zeroes; thus, each list item occupies exactly 150 x 30 pixels.

You can align the text horizontally using the attribute text-align under #iconwrap li. To control the vertical alignment, you need to use the padding-top under #iconwrap li a and #iconwrap li a:hover. The text is closer to the top if the number of pixels (or whatever unit of measurement you wish) of the padding-top is lower.

One important thing to remember; you must set it up in a way that the sum of the padding-top and height under the #iconwrap li a and #iconwrap li a:hover are equal to the height attribute under #iconwrap li. In our example, the padding-top is 10 pixels and the height is 20 pixels (for li a and li a:hover). Their sum, 30 pixels, is equal to the height of a list item li.

The padding-top attributes for li a and li a:hover should be equal if you want the text link to stay in one place. If they are not equal, you will be able to see an effect wherein the text link moves up or down whenever the mouse pointer hovers. You might want to incorporate this trick in your design.

The IDs #icon1, #icon2 and #icon3 are used to assign the individual images that will appear as normal background (pic1.jpg, pic2.jpg and pic3.jpg) and as hover background (hover1.jpg, hover2.jpg and hover3.jpg) for each list item. The attributes center center no-repeat is used to control the alignment of the background image and whether or not they will repeat.

If the dimension of the li is exactly the same as the images being used as default background and as hover backgrounds, the attributes center center no-repeat is not needed. This is true in this example wherein the background images assigned to each list item is 150 x 30 pixels, the defined dimensions of li in the CSS.

Final notes:

Similar to the Java Image Flip, you can replace the symbol "#" with any link (URL) that you want. By removing the href="#", you can create an image flip without any link.
If you are very strict in following W3C standards, you might want to add alt text in each image within the "loader" division. Otherwise, that is not necessary because those images are meant to be invisible anyway.
In this example, the dimension of the list item is exactly the same as the background images. It's up to you to experiment with padding, margin, center, no-repeat and other attributes to get the results that you want.
Be sure that your link text would fit in the dimensions of the item list li. If the link text is too long, make it shorter or adjust the dimensions of the li and your background images. In Firefox, the some parts of the long link texts are hidden. In Internet Explorer, the entire layout can be ruined.