Galería con efectos sólo con CSS

Hay muchas formas de mostrar imágenes con efectos diversos utilizando sólo CSS; el problema que tienen muchos es que estas cosas suelen no ser "amigables", no es cosa de copiar y pegar para que funcione sino que requiere intentar entender cómo funcionan para poder adaptarlas a determinado contexto. Por ejemplo, eso pasa con CSS3 Gallery de Andrea Giammarchi que tiene una idea muy interesante sobre la que uno puede jugar, modificar y probar distintas alternativas.

Por lo general, todo se ve bien pero los ejemplos tienen sus trampas; se muestran en páginas vacias donde todo se posiciona de manera absoluta y no hay nada otra cosa que influya; son contextos asépticos y si queremos usarlo en un blog o una página web donde haya otros elementos alrededor, las cosas se complican; más aún si no se tienen en cuenta que los navegadores no funcionan igual y que hay propiedades que no reconocen.

Todo eso suele tener solución; basta jugar un poco con las propiedades y probar a ver que sale aunque, eventualemente, es posible que no salga nada.

En este caso, voy a usar cuatro imágenes y las colocaré en una lista ordenada a la que idendificaré con un ID:

<ul class="thumb">

  <li><img src="URL_imagen_1"/></li>

  <li><img src="URL_imagen_2"/></li>

  <li><img src="URL_imagen_3"/></li>

  <li><img src="URL_imagen_4"/></li>

</ul>

<div> ....... cualquier contenido ....... </div>

Eso es lo de menos, la clave, claro, es el CSS así que acá va un modelo de ejemplo:

<style>



  /* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado */

  /* por ese motivo, debo dimensionarla con width y height  */

  ul.thumb {

    float: left;

    height: 240px;

    list-style: none;

    margin: 0;

    position: relative;

    width: 260px;

  }



  /* cada item es una imagen que fuerzo a que se muestren pequeñas */

  ul.thumb li {

    /* se posicionand e manera absoluta */

    position: absolute;

    left: 50px;

    top: 0;

    z-index: 0;

    /* algo de decoración */

    background-color: #FFF;

    box-shadow: 0 0 10px #444 inset;

    padding: 10px;

    /* el tamaño de la imagen a mostrar */

    height: 112px;

    width: 150px;

    /* la transición será el efecto */

    -moz-transition: all 1s ease-in-out 0s;

    -webkit-transition: all 1s ease-in-out 0s;

    -o-transition: all 1s ease-in-out 0s;

  }

  ul.thumb li img {

    height: 100%;

    width: 100%;

  }



  /* cada item se posiciona y se rota a gusto */

  ul.thumb li:nth-child(1) {

    -moz-transform: rotate(20deg);

    -webkit-transform: rotate(20deg);

    -o-transform: rotate(20deg);

    margin-top: 100px;

  }

  ul.thumb li:nth-child(2) {

    -moz-transform: rotate(-30deg);

    -webkit-transform: rotate(-30deg);

    -o-transform: rotate(-30deg);

    margin-top: 0px;

  }

  ul.thumb li:nth-child(3) {

    -moz-transform: rotate(-15deg);

    -webkit-transform: rotate(-15deg);

    -o-transform: rotate(-15deg);

    margin-top: 75px;

  }

  ul.thumb li:nth-child(4) {

    -moz-transform: rotate(10deg);

    -webkit-transform: rotate(10deg);

    -o-transform: rotate(10deg);

    margin-top: 50px;

  }



  /* el efecto al poner el cursor encima */

  ul.thumb li:hover {

    /* se elimina la rotación */

    -moz-transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    /* se muestra la imagen con su tamaño real */

    height: 375px;

    width: 500px;

    /* se la posiciona y se la pone en primer plano */

    margin-left: 0px;

    margin-top: -50px;

    z-index:10;

    /* algo de decoración */

    border-radius: 10px;

    padding:20px;

  }

</style>

El estilo utiliza la pseudo-clase nth-child que, lamentablemente, no está implementada en Internet Explorer salvo a partir de su versión 9 así que, lo primero que habría que hacer es intentar que la galería se vea en IE8. Eso, es algo que puede hacerse de distinto modos, ninguno es ideal pero ... es lo que hay.

Por ejemplo, podemos agregar el script ie9js que es un script que agrega una cantidad de funciones extras, ayudando a que las versiones más viejas de IE interpreten propiedades que normalmente no están implementadas. Se coloca antes de </head>:

<!--[if lt IE 9]>

<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js'/>

<![endif]-->

En este caso, la solución es parcial ya que, de todos modos, la rotación de las imagenes deberá hacerse utilizando filtros lo que también implcia cambair los margenes y por lo tanto, será necesario usar condicionales así que deberemos agregarles algún ID a cada etiqueta LI; en este caso, las llamé IE1, LE2, IE3 e IE4.

<!--[if IE]>

<style type='text/css'>

  ul.thumb li { zoom: 1; }

  #IE1 {

    margin-left: -30px;

    margin-top: -20px;

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');

  }

  #IE2 {

    margin-left: -20px;

    margin-top: 15px;

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');

  }

  #IE3 {

    margin-left: -30px;

    margin-top: 50px;

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=0.25881904510252074, M21=-0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');

  }

  #IE4 {

    margin-left: 0px;

    margin-top: 90px;

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');

  }

  ul.thumb li:hover {

filter: progid:DXImageTransform.Microsoft.Matrix(enabled='false') !important;

  }

</style>

<![endif]-->

• 


• 


• 


• 

Maecenas congue ornare fermentum. Aliquam orci ipsum, fringilla id vehicula eget, consequat ut lorem. Nunc commodo ornare diam, at varius felis imperdiet et. Aenean commodo malesuada nibh eu eleifend. Sed et ante vitae nisi ullamcorper pretium. In id convallis tellus. Phasellus feugiat, arcu ac scelerisque interdum, purus dui rutrum diam, et sollicitudin ante diam ac diam? Duis nec erat metus. Duis placerat eros vel elit feugiat ornare blandit urna laoreet. Phasellus dapibus lorem sit amet tortor adipiscing non mollis felis pretium. In vitae lectus nec justo viverra eleifend. Duis hendrerit est quis nulla faucibus quis suscipit ante condimentum. Etiam scelerisque lacus ac neque eleifend rhoncus. Suspendisse potenti. Mauris vulputate varius elementum. Proin semper leo nec augue massa nunc.