Handling logos

by csswizardry

HTML

<a href="#" id="logo">
    <img src="http://hry.rbrts.me/img/content/logo.png" alt="hr logo">
</a>

CSS

html,
body{
    background:#aaa;
}
#logo,
#logo img{
    display:block;
    width:100px;
    height:100px;
}
#logo{
    background:url(http://hry.rbrts.me/img/css/sprite.png);
}
#logo img{
    opacity:0;
    filter:alpha(opacity = 0); /* Ew, IE hack! */
}
#logo:hover{
    background-position:0 -100px;
}