Search code examples
htmlcsshoverpositionsprite

HTML+CSS One position class for different size icon sprites

Trying to make a menu with icons that change color on hover. The point is: having inline-css on each menu icon to change the sprite file, for example: <a href="#" style="background-image: url(menuSprites/smartphone.png);" class="">Contact</a> and in the CSS - only one class:

.menuPicHeader a{   
        background-repeat: no-repeat;
        display: inline-block;
        height: 50px;
        background-position: X X;
    }

    .menuPicHeader a:hover{
            background-position: X -X;
    }

The problem - each icon pair (2 icons per sprite, 1 normal 1 hover) is different size . So if I pre-set some background-position offset, it obviously doesn't work because of the different sizes. Is there some tool/easy method for making sprites that would work with the same offset? This is what I used to test it, made it with one generator using 50 pixel vetical gap:

(phone and the ball - different sizes)

File 1:

File2 :

P.S. Generator I used: http://www.cssportal.com/css-sprite-generator/

Solution

  • Either make the images the same size for each image (better) or set special properties for individuals.