Cambiar imgenes con CSS.

Esta es una cosa relativamente sencilla pero que con una combinacin de grficos adecuada puede quedar bastante bien. Se trata de disponer de dos imgenes y hacer una sustitucin simple con CSS aprovechando la pseudoclase hover, pero la imaginacin de cada cual es la que puede convertir simple cdigo en algo agradable a la vista. Es el caso de Alba Diethelm, que quera presentar en su espacio web (en construccin) mediante un sistema similar, a los miembros del equipo de su nuevo proyecto. De ella es esta idea y las imgenes de este ejemplo ilustrativo y nosotros slo hemos puesto la parte tcnica. Pasando el cursor por encima de cada cara podris ver los nombres y cargos de cada componente del grupo. Si os gusta, ms adelante la explicacin y el cdigo con el que hacer esto.

La construccin del HTML es la habitual de una imagen con enlace y el truco en esta parte slo consiste en insertar dentro de dicho enlace, una segunda imagen entre etiquetas span. Estas seran las dos primeras y como veis no tienen ninguna ciencia: una con la cara y otra que adems de la cara lleva un rtulo.

Con las etiquetas span lo que conseguimos es poder independizar cada par de imgenes dentro de cada enlace. La segunda aparecer solapada sobre la primera, pero slo se ver cuando hagamos hover. La estructura sera esta: <div class="presentar"> <a href="#"> <img alt="" src="IMAGEN_1a" /> <span> <img alt="" src="IMAGEN_1b" /> </span> </a> <a href="#"> <img alt="" src="IMAGEN_2a" /> <span> <img alt="" src="IMAGEN_2b" /> </span> </a> <a href="#"> <img alt="" src="IMAGEN_3a" /> <span> <img alt="" src="IMAGEN_3b" /> </span> </a> </div> <div style="clear: both;"></div> La parte CSS tambin es fcil pues slo hace falta estilo para los enlaces de la clase que hemos creado (presentar), sus span y el hover.

El contenedor general ser el enlace, al que le asignaremos una posicin relativa para luego poder situar de manera absoluta la segunda imagen dentro de l. Lo que conseguiremos con esto es que ambas imgenes realmente estn una encima de otra en el mismo espacio, el destinado al enlace. Luego pondremos una opacidad nula a la segunda imagen -la de dentro del span-, o lo que es lo mismo, la haremos transparente. Para que se vea al hacer hover, aplicamos a ese estado una opacidad total y as ser cmo logremos ver el contenido. As que esto es lo que hay que teclear (o copiar) en nuestra hoja de estilo: .presentar a, .presentar img, .presentar a span { border:0; padding:0; margin:0; } .presentar a { position: relative; display: block; float: left; } .presentar a span { opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0px; left: 0px; } .presentar a:hover span {opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

A partir de aqu y cmo deca al principio, la imaginacin de cada uno es lo importante. Con esto se podra hacer tambin por ejemplo un men grfico, ya que los enlaces que aqu hemos dejado vacos (#) se podran rellenar perfectamente para que llevaran a algn lado. Seguro que se os ocurren otras utilidades. Lo que viene al final es una pequea variante en la que la segunda imagen se ha desplazado un poco con respecto a su respectivo original de manera que la alternancia de ambas simulen movimiento.

Estas dos demos combinadas y el cdigo publicado, tambin lo podis encontrar subido a Dabblet.