Small Pirate

Bueno amigos quiero compartirles una galeria de imagenes... con efectos :)
demo. http://ensayos-sp.eshost.es/index.php





lo ubican donde mas les guste le editan los efectos a su gusto y listo voy a marcar con rojo lo que maneja cada cosa :)

en su .css colocan

<style>

  /*[color=red] la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado [/color]*/
  /* [color=red]por ese motivo, debo dimensionarla con width y height [/color] */
  ul.thumb {
    float: left;
    height: 240px;
    list-style: none;
    margin: 0;
    position: relative;
    width: 260px;
  }

  /* [color=red]cada item es una imagen que fuerzo a que se muestren pequeñas[/color] */
  ul.thumb li {
    /* [color=red]se posicionand e manera absoluta[/color] */
    position: absolute;
    left: 50px;
    top: 0;
    z-index: 0;
    /* [color=red]algo de decoración [/color]*/
    background-color: #FFF;
    box-shadow: 0 0 10px #444 inset;
    padding: 10px;
    /* [color=red]el tamaño de la imagen a mostrar[/color] */
    height: 112px;
    width: 150px;
    /*[color=red] la transición será el efecto [/color]*/
    -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%;
  }

  /*[color=red] cada item se posiciona y se rota a gusto[/color] */
  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;
  }

  /* [color=red]el efecto al poner el cursor encima [/color]*/
  ul.thumb li:hover {
    /* [color=red]se elimina la rotación [/color]*/
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    /* [color=red]se muestra la imagen con su tamaño real[/color] */
    height: 375px;
    width: 500px;
    /*[color=red] se la posiciona y se la pone en primer plano[/color] */
    margin-left: 0px;
    margin-top: -50px;
    z-index:10;
    /* [color=red]algo de decoración[/color] */
    border-radius: 10px;
    padding:20px;
  }
</style>

en el recent.template buscan por:

<?php

y antes de eso colocan:

<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>

y listo eso es todo 

lo unico que tienen que cambiar es la orientacion donde apareceran la galeria.

Agradecer no cuesta.

Está lindo, lo unico que noto es que esta como con mala calidad de imagen ese fondo blanco.