CSS Image Flip

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

As I stated earlier in my earlier tutorial about Java Image Flip, hackers and spammers frequently use Javascripts to attach nasty malwares to your computer. Because of this, many people disable Javascript in their browsers. In this tutorial, I will discuss how to create an image flip that relies on CSS instead of Javascript. It works in exactly the same way as Java Image Flip but operates with entirely different sets of codes.

An example of CSS Image Flip is shown below. On the surface, it is exactly the same as the Java Image Flip. Click here to see the CSS Image Flip on its own browser window or tab.

The HTML code is shown below. You can place it anywhere between the <body> and </body> tags.

<div id="loader">
<img src="pic1c.jpg"/>
<img src="pic2c.jpg"/>
<img src="pic3c.jpg"/>
</div>
<div id="iconwrap">
<ul>
<li id="icon1"><a href="#"><img border="0" src="invisible.gif" width="66"
height="66" alt="transparent"/></a></li>
<li id="icon2"><a href="#"><img border="0" src="invisible.gif" width="66"
height="66" alt="transparent"/></a></li>
<li id="icon3"><a href="#"><img border="0" src="invisible.gif" width="66"
height="66" alt="transparent"/></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: #fafafa;
	font-size:9px; color:#ffffff;
	font-family:verdana
}

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

#iconwrap {
        width: 198px;
	margin: 0 auto;
	padding: 0;
}

#iconwrap li  {
        list-style: none;
	margin: 0;
	padding: 0;
        border: 0;
	width: 66px;
	height: 66px;
	float: left;
}

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

#icon1 a {
	width: 66px;
	height: 66px;
	float: left;
	background: url('pic1b.jpg') center center no-repeat;
}

#icon1 a:hover {
	width: 66px;
	height: 66px;
	float: left;
	background: url('pic1c.jpg') center center no-repeat;
}

#icon2 a {
	width: 66px;
	height: 66px;
	float: left;
	background: url('pic2b.jpg') center center no-repeat;
}

#icon2 a:hover {
	width: 66px;
	height: 66px;
	float: left;
	background: url('pic2c.jpg') center center no-repeat;
}

#icon3 a {
	width: 66px;
	height: 66px;
	float: left;
	background: url('pic3b.jpg') center center no-repeat;
}

#icon3 a:hover {
	width: 66px;
	height: 66px;
	float: left;
	background: url('pic3c.jpg') center center no-repeat;
}

As you can see, the HTML code is much simpler than that of Java Image Flip, but the CSS code is more complicated. It is because we delegated all the functional codes in the CSS. The HTML does not need to call an external function or use commands like OnMouseOver or OnMouseOut.

Similar to Java image flip, the CSS image flip requires two sets of images, the default images (pic1b.jpg, pic2b.jpg and pic3b.jpg) and the hover images (pic1b.jpg, pic2b.jpg and pic3b.jpg). The default image shows up under normal circumstances while the hover image replaces the default image whenever the mouse cursor hovers on that image.

Let us examine the HTML code. It has two important block elements, the "loader" and the "iconwrap". Since they are just assigned IDs, you can change the name to whatever name you want as long as you are consistent.

The "iconwrap" is the block element that contains the flipping images and ensures that they are arranged properly. The "loader" on the other hand, is an invisible block element that is used to ensure that the hover images are already in the cache so that when the mouse pointer hovers above any of the default images, the switch to its corresponding hover image will happen without any delay (since it is already downloaded in the cache).

If you check the loader's CSS code #loader, its visibility is hidden, its dimensions are zeroes and it does not allow any element to overflow.

The "loader" and the "iconwrap" may or may not be adjacent as long as the "loader" comes first before the "iconwrap" (in the HTML code, not as they appear in browser window). You can have the "loader" on top of the html code right under the <body> tag, followed by several divisions not related to the image flip, and have the "iconwrap" right before the </body> tag, and it will still work.

Now, let us go to the "iconwrap". Each image that you can see corresponds to a single bullet list <li>. The images that you can see, the cross, the square and the triangle (pic1b.jpg, pic2b.jpg and pic3b.jpg respectively) are displayed not as embedded images but as background images.

We assigned the IDs #icon1, #icon2 and #icon3 in each of these <li> tags. The default image assigned to #icon1 is assigned as background to #icon1 a while the hover image (pic1c.jpg) is assigned as background to #icon1 a:hover. The images are just link background and link hover background. This is also how #icon2 and #icon3 work. However, to create a link, there must be a text or an image on which the link would anchor.

The invisible.gif provides us with the anchor image to make an image flip. The invisible.gif is a transparent gif file that allows anything behind it to be shown. If we check the CSS codes, the bullet list li has zero margin, zero padding and zero border. These arguments apply to all bullet lists <li> in the HTML code, and these allow the invisible.gif to occupy the entire dimension of each list item.

Its mechanism is pretty simple. Since the invisible.gif is a link situated within a list item, its background image is pic1b.jpg. If the mouse hovers above the invisible.gif (not above the pic1b.jpg), the HTML will call the code that corresponds to a:hover, causing the background image to change to pic1c.jpg. Since the link anchor image is transparent, we can see the background image in its entirety.

An alternative design, a set of image flips arranged in vertical order can be seen by clicking here. The only difference is that the #iconwrap li in the CSS code does not contain float: left;. However, the float: left; must be retained to #icon1, #icon2 and #icon3, for both a and a:hover. Removing float: left; in these IDs causes the background to not align properly with the area defined by the <li> tag.

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" block element. Otherwise, that is not necessary because those images are meant to be invisible anyway.

Posted by Greten on November 20, 2008 under Cascading Stylesheet (CSS)

Share and Enjoy: