Reemplazando imágenes con CSS

Esta técnica par reemplazar imágenes utilizando CSS es una ocurrencia de Mike’s Experiments y es interesante porque permite generar efectos rollover de forma eficaz, precargando las imágenes lo cual hace que el reemplazo de una por otra sea rápido.

El código CSS (en este caso, aplicado a un encabezado) es el siguiente:

h2.demoIR a {
  background-color: #000;
  border: 4px solid #333;
  display: block;
  height: valorpx; /* la altura de la imagen */
  margin: 0 auto;
  width: valorpx; /* el ancho de la imagen */
}
h2.demoIR a:hover, h2.demoIR a:focus, h2.demoIR a:active {
  background: #000 url(URL_imagen2) no-repeat 50% 50%;
  border: 4px solid #555;
}
h2.demoIR a:hover img, h2.demoIR a:focus img, h2.demoIR a:active img  {
  background: transparent;
  visibility: hidden;
}

Y lo usamos de esta manera:

<a href="#">
<img alt="tex" src="URL_imagen1" width="ancho" height="alto" />
</a>