Lighting up Images in CSS

CSS Bakery readers will remember how we built the Categories section in the right sidebar. The menu started out as img tags wrapped in li's with only the category text clickable. Later on we placed all the images in one file to reduce downloading times. Since then I've added a few new categories whose images I did not get the chance to add to the sprite file. So mostly we are pulling the category images from one file but a few are still standalone images. The markup reflects the different approaches.

In this post, regardless of how we load the images, I am going to show you how to light them up when there's a hover action. The first change is for making the images clickable which is just a matter of wrapping the img, or div in the case of a sprite, in an "a" element. Opacity property came in handy for the lighting effect. You can play with different opacities - 0.4 worked fine for me. The two selectors, categories_div li.categories a:hover img and .categories_div li.categories a:hover div, account for the differences in the markup:

.categories_div li.categories a:hover img, 
.categories_div li.categories a:hover div {
  opacity: 0.4; 
  filter: alpha(opacity=40);
}

<div class='navdiv categories_div'>
<h4>categories</h4>
<ul>

<li class='categories'>
<a href='http://cssbakery.blogspot.com/search/label/Website%20Design' target='_blank'>
<img alt='web design' src='images/redmix2.jpg' title='web design'/></a>
<a href='http://cssbakery.blogspot.com/search/label/Website%20Design' target='_blank'>
Website Design
</a>
</li>

<li class='categories'>
<a href='http://cssbakery.blogspot.com/search/label/CSS%20Syntax' target='_blank'>
<div id='cat2'/>
</a>
<a href='http://cssbakery.blogspot.com/search/label/CSS%20Syntax' target='_blank'>
CSS Syntax
</a>
</li>

......

You can test drive the new changes by hovering over the category images like the red Kitchenaid mixer in the right sidebar. They should be both clickable and also change color with hover.