Hover Rollover Situation

Question

Here is the basic code for the function I want to do:

<style>

.cmaxx_rollover {
height: 279px;
width: 347px;
display: block;
background: url('http://imperialsystems.biz/imp/files/products/prod_cmaxx.png') bottom;
text-indent: -99999px;}

.cmaxx_rollover:hover {
background-position: 0 0;}

</style>

<a class="cmaxx_rollover" href="http://imperialsystems.biz/imp/products/cmaxx-dust-fume-cartridge-collector/"></a>

So now the question, I have a page of about a dozen products that I need this hover to work on. Is there a better way to do it than to create a new class for each product? Or should I just create the CSS and class for each product?

Answer 1

If you only change the shadow behind the grey rectangle, you could set it as background for all the products and insert product images with transparent background as img like this:

<div class="products">
<a href="..."><img src="cmaxx.png" alt="CMAXX"></a>
<a href="..."><img src="productx.png" alt="Product X"></a>
</div>

With simple style:

.products a {
    background: url(gray.png) bottom;
    width: 279px;
    width: 347px;
    display: block;
}

.products a:hover, .products a:focus {
    background-position: 0 0;
}

And even better you could throw away the image and use CSS gradients and shadows.

If there will be different backgrounds you will have to use separate classes (possibly with partially shared css). You can also make the images to one to save http requests using css sprites technique.