Logo con efecto de animación con CSS

Desde el sitio Swedish Fika les traigo un tutorial para crear un encabezado al que, al pasar el mouse sobre él, le aparezca un fondo a través de un efecto de desvanecimiento. Para esto se usará XHTML básico, CSS y algo de Javascript no obstrusivo mediante JQuery. El efecto final puedes observarlo aquí.

La imagen que utilizan en el ejemplo puedes verla debajo de este párrafo. Como verás se encuentran tanto la imagen normal como la que aparecerá con el efecto en un mismo archivo. De esta forma nos aseguramos de que cargue más rápidamente.

Es importante que las partes repetidas en ambas imágenes coincidan totalmente ya que cualquier diferencia, aunque sea de sólo unos pocos pixeles se notará bastante.

El HTML que utilizaremos es muy simple, tan sólo la siguiente línea:

<h1 id="header"><a href="#">Awesome header</a></h1>

Luego debemos agregar el siguiente código CSS:

#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}
#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}

De esto debemos ajustar las propiedades width con el ancho de nuestra imagen, height con su altura y en background debemos sustituir header.jpg por la ruta y el nombre del archivo.

Por último nos queda incrustar el Javascript. Antes que nada debemos enlazar nuestra página a JQuery mediante el código que dejo a continuación:
<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>

Si aún no tienes esta librería puedes descargarla de su sitio oficial.

Luego de esto colocamos la siguiente función en el sector head del sitio:

&lt;script type="text/javascript">
//<![CDATA[

var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});
$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});
}
};

$(function(){
Header.addFade("#header");
});

//]]>
</script>

Con esto ya habremos terminado y tendremos nuestro header listo para usar.

Fuente: Swedish Fika