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 It was last revised on
