Semantic Image Hover With CSS

There are all sorts of ways to do image hover effects. The goal with this method was to create a hover with minimal and semantic markup while also avoiding Javascript. The motivation was to create social networking links using the effect.

To the right is an example:

Let’s begin with the image tag itself.

<img src='images/digg_dark.png' alt='Digg' />

There is nothing special about this image tag. The image it displays is the image that will appear when the cursor isn’t hovering over it. Because this image will be a link we also need to add an anchor tag.

<a class='social_link digg' href='http://digg.com/submit?phase=2&amp;url='>
  <img src='images/digg_dark.png' alt='Digg' />
</a>

That should be all of the markup we need, two tags. Now we have an image that is also a link. In this case the link submits our article to digg. Now for the effect itself. You can see that there have been two classes applied to the anchor tag. The first, ‘social_link’, will be used for layout while the second, ‘digg’, will be used to display the color digg icon on hover.

The general strategy here is to set the background image of the anchor tag as the color dig icon and then hide the dark dig icon on hover allowing the color icon to show through. To do this we need to make sure that the anchor tag will still retain it’s size and not collapse when the image tag is hidden.

  a.social_link {
    display: block;
    height: 16px;
    width: 16px;
    float: left;
    margin-right: 0.3em;
  }

  a.social_link img {
    display: block;
  }

So by displaying the anchor as a block and setting it’s width and height it will retain it’s shape when the image tag it contains is hidden. The float and margin-right styles are allowing the icons the be arrange in a row. The image tag by default is an inline element so we must also display it as a block.

Now to apply the color icon to the background of the anchor tag.

  a.digg {
    background-image: url(/images/digg.png);
  }

Finally the hover style that will cause the image displayed by the image tag to be hidden.

  a.social_link:hover img {
    display: none;
  }

There are some limitations to this method. While the social_link class can be used for any link the digg class is obviously specific to the digg link. A new class will need to be created for every new link that is added using this effect. That being said this method should work on all browsers (including IE 7+) and degrades gracefully when when styles aren’t supported (the original image tag will apppear.)

Below is the full style and markup listing:

CSS

  a.social_link {
    display: block;
    height: 16px;
    width: 16px;
    float: left;
    margin-right: 0.3em;
  }

  a.social_link img {
    display: block;
  }

  a.social_link:hover img {
    display: none;
  }

  a.digg {
    background-image: url(/images/digg.png);
  }

XHTML

  <a class='social_link digg' href='http://digg.com/submit?phase=2&amp;url='>
    <img src='images/digg_dark.png' alt='Digg' />
  </a>

Posted by Chad Jablonski on Nov 29, 2009