Transiciones con CSS e imágenes

JMiur

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, colocamos dos imágenes a las que le agregamos clases y definimos sus reglas generales:

<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 tiene la clase visible; la otra estaría debajo ya que ambas ocupan la misma posición.

Poniendo el cursor encima, cambian:

Agregando las propiedades de transición, haremos lo mismo pero animando ese cambio de opacidad así que sólo agregamos la propiedad a todas las imágenes:

#demoIMG img {
  .......
  /* esto, hará que cualquier cambio en las imágenes, se muestren con una animación */
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Y jugamos un poco, agregando transformaciones en una o en ambas imágenes.

En este otro ejemplo, al cambio de la opacidad anterior, le sumamos una tranformación de escala así que cuando permuten, lo harán "aumentando" de tamaño:

#demoIMG img.novisible {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}
#demoIMG:hover img.novisible {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
#demoIMG:hover img.visible {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}

En este último ejemplo, se hace lo mismo, variando la escala y ocultando la primera con un efecto de rotación:

#demoIMG img.novisible {
  -moz-transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -o-transform:scale(1,0);
  -ms-transform:scale(1,0);
}
 #demoIMG:hover img.novisible {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
 #demoIMG:hover img.visible {
  -moz-transform:rotate(360deg) scale(0);
  -webkit-transform:rotate(360deg) scale(0);
  -o-transform:rotate(360deg) scale(0);
  -ms-transform:rotate(360deg) scale(0);
}