Transiciones con CSS e imágenes

Hay muchas ideas y demos dando vuelta por la web que muestran lo que puede hacerse con las transiciones; por lo general, la mayoría de ellos siempre hablan de Chrome pero basta agregar los prefijos adecuados para que tambien funcionen en Opera y Firefox 4. Estos son algunos ejemplos que nos permiten generar efectos con imágenes. Pero hay muchos más.

En todos ellos, el HTML es similar y tiene este esquema:

<div class="demoIMG"> <img class="novisible" src="URL_UNA_IMAGEN" /> <img class="visible" src="URL_OTRA_IMAGEN" /> </div>

En un DIV normal, le incorporamos dos imágenes a las que complementará los estilos y las las clases y reglas:

<style> .demoIMG { /* el rectángulo contenedor */ position:relative; /* indicamos esto para poder posicionar su contenido de maera absoluta */ height:330px; /* le damos una cierta altura */ margin:0 auto; /* lo centramos */ width:500px; /* le damos un cierto ancho */ } .demoIMG img { /* el contenido */ left: 0; /* posición izquierda */ position:absolute; /* indicamos que su posición es absoluta con respecto al contenedor */ top: 0; /* posición superior */ } /* y ponemos propiedades en las clases de cada imagen */ /* la primera no será visible por defecto */ .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);} /* y se verá cuando pongamos el cursor encima del DIV */ .demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);} /* la segunda se ocultara siempre que pongamos el cursor encima del DIV o de la imagen */ .demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);} .demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);} </style>

Si sólo pusiéramos eso, veríamos una imagen, la que esta de portada "la visible", ahora el hover procedente al paso del cursor, se vería la transición inmediata de este hacia la imagen no visible la que cumple con la función, observa :

1.  Listo! si te gusto, dale mg al sitio
2. Si tienes dudas, comenta todas serán respondidas.

¡Compártelo!

Tweet