Introduction

This tutorial will explain how to add a hover effect to any element by using only HTML and CSS with the :hover pseudoclass. While I've found a few different variations, this seemed the easiest for me. Also, this method is very easy to apply your own variations to. Your imagination is the limit.

Starting Out

The first thing we will do is create a basic HTML layout for purposes of this tutorial demonstration. This HTML will have two div elements. The nested one will have a class of "hovereffect" (which will be defined in the css.) Also we will have a sample text - "test" for demo purposes.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hover Demo</title>
<link href="hoverdemo.css" rel="stylesheet" type="text/css" />
 
<body>
 
<div>
<div class="hovereffect">Test</div>
</div>
 
</body>
</html>
 

Note: this is very bare bones but will serve us well to understand the basic principle of what we are trying to accomplish.

The background image

The next step will be to create an image that will simulate a background color change. Since the container of the element we are going to create the hover effect for is 100 x 100 px, we will need to create an image twice as wide as the element. The reason for this is that we will be shifting the image to the left 100px. This will give us our desired hover effect. Of course one half of the image will need to be a different shade than the other half.

This is the image we chose as a sample:

The next step is the CSS. For this tutorial, we will assume you have a basic understanding of CSS and will not try to explain every element. The main one to pay attention to will be the DIV element with the hovereffect class.

 
body {
    background: #808080;
}
 
* {
    margin: 0;
    padding: 0;
}
 
 
 
div {
    background: url(hoverimage.jpg);
    width: 100px;
    height: 100px;
    margin: 200px auto;
    text-align: center;
    font-family: arial;
    font-size: large;
    color: black;
}
 
div .hovereffect:hover {
    background-position: -100px;
    color: red;
    
}
 

Notice that difference between the div with the "hovereffect" class and the ":hover" pseudo-class? The background image will shift to the left 100 px. thus instead of a dark grey background, there will be a light grey background. The possibilities are many for background images.... i.e. gradients... shading, etc. Also, notice the font color change. I'm sure you can also use your imagination here to create whatever text effects you might want.

Conclusion

That's the ins and outs for a simple hover effect using the :hover pseudo class of CSS. I hope you find this useful and implement it. Be creative! PM me for a better sampling of this in actual usage.

This page was published on

0

6 Comments

  • Votes
  • Oldest
  • Latest

That's a very specific way of doing it, let's say you don't know what the size of the div is going to be. You caan then do the following:

div.hovereffect{
background-color:#555555;
}
div.hovereffect:hover{
background-color:#666666;
}

That way you don't use images (page loads faster) and the div can be any size.

add a comment
0
NA

That's a very specific way of doing it, let's say you don't know what the size of the div is going to be. You caan then do the following:

div.hovereffect{
background-color:#555555;
}
div.hovereffect:hover{
background-color:#666666;
}

That way you don't use images (page loads faster) and the div can be any size.

I'm sorry I didn't make myself clearer. I was using this tutorial implicitly for the use of images, not just to change BG color. There are a lot of neat things u can do with this. For example, making a lantern "light up" on hover, changing a facial expression, etc.

A good example is the header on one of my sites.. decklocker dot com

add a comment
0

Okay, but you can use CSS to swap the images aswell, here's an example:

div.hovereffect{
background-image:url(/images/background.jpg);
width:100px;
height:100px;
}
div.hovereffect:hover{
background-image:url(/images/background_hover.jpg);
}
div.hidden{
display:none;
}

and then you can also use the hidden div to preload images, as such:

<div class='hidden'>
 <img src='/images/background_hover.jpg' alt='Hidden Image' />
</div>
add a comment
0
NA

Nice! But would it be better to load 2 images or just 1? I wouldn't know.

add a comment
0

No you do not have to preload both because the first one "background.jpg" will be loaded automatically. The second image however will only start loading once you hover, thus we preload it ...

add a comment
0
GR

You could get around the preload issue with CSS sprites. That way your just changing the position of the image and not requiring a a second http request.

add a comment
0