TUTORIAL: Creating a hover effect on elements using CSS

  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

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.

Code: [ Select ]
 
<!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>
 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.  
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <title>Hover Demo</title>
  8. <link href="hoverdemo.css" rel="stylesheet" type="text/css" />
  9.  
  10. <body>
  11.  
  12. <div>
  13. <div class="hovereffect">Test</div>
  14. </div>
  15.  
  16. </body>
  17. </html>
  18.  




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:

Image

The CSS



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.

Code: [ Select ]
 
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;
   
}
 
  1.  
  2. body {
  3.     background: #808080;
  4. }
  5.  
  6. * {
  7.     margin: 0;
  8.     padding: 0;
  9. }
  10.  
  11.  
  12.  
  13. div {
  14.     background: url(hoverimage.jpg);
  15.     width: 100px;
  16.     height: 100px;
  17.     margin: 200px auto;
  18.     text-align: center;
  19.     font-family: arial;
  20.     font-size: large;
  21.     color: black;
  22. }
  23.  
  24. div .hovereffect:hover {
  25.     background-position: -100px;
  26.     color: red;
  27.    
  28. }
  29.  


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.
Attachments:
hoverimage.jpg
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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:

CSS Code: [ Select ]
div.hovereffect{
background-color:#555555;
}
div.hovereffect:hover{
background-color:#666666;
}
  1. div.hovereffect{
  2. background-color:#555555;
  3. }
  4. div.hovereffect:hover{
  5. background-color:#666666;
  6. }


That way you don't use images (page loads faster) and the div can be any size.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

righteous_trespasser wrote:
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:

CSS Code: [ Select ]
div.hovereffect{
background-color:#555555;
}
div.hovereffect:hover{
background-color:#666666;
}
  1. div.hovereffect{
  2. background-color:#555555;
  3. }
  4. div.hovereffect:hover{
  5. background-color:#666666;
  6. }


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
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Okay, but you can use CSS to swap the images aswell, here's an example:
Code: [ Select ]
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;
}
  1. div.hovereffect{
  2. background-image:url(/images/background.jpg);
  3. width:100px;
  4. height:100px;
  5. }
  6. div.hovereffect:hover{
  7. background-image:url(/images/background_hover.jpg);
  8. }
  9. div.hidden{
  10. display:none;
  11. }

and then you can also use the hidden div to preload images, as such:
Code: [ Select ]
<div class='hidden'>
<img src='/images/background_hover.jpg' alt='Hidden Image' />
</div>
  1. <div class='hidden'>
  2. <img src='/images/background_hover.jpg' alt='Hidden Image' />
  3. </div>
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

Nice! But would it be better to load 2 images or just 1? I wouldn't know.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ...
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 7 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.