Spoiler immagini

Per vedere l'effetto:
Clicca Qui

HTML:
Sostituire KungFu Panda, Toy Story 2, ecc.. con il titolo delle immagini che volete!
Sostituire # con un link se volete che cliccando sopra al titolo o/e all'immagine, vi si venga reindirizzati!
Sostituire il link dopo src con il link dell'immagine che volete!
Per eliminare un immagine togliere da <li> a </li>..

Codice:

<div class="spoiler">
   <ul>
      <li>
         <div class="image_title">
            <a href="#">KungFu Panda</a>
         </div>
         <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
         </a>
      </li>
      <li>
         <div class="image_title">
            <a href="#">Toy Story 2</a>
         </div>
         <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
         </a>
      </li>
      <li>
         <div class="image_title">
            <a href="#">Wall-E</a>
         </div>
         <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
         </a>
      </li>
      <li>
         <div class="image_title">
            <a href="#">Up</a>
         </div>
         <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
         </a>
      </li>
      <li>
         <div class="image_title">
            <a href="#">Cars 2</a>
         </div>
         <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
         </a>
      </li>
   </ul>
</div>


CSS (All'interno, ci sono alcune indicazione per le modifiche..):

Codice:

* {
   margin: 0;
   padding: 0;
}

/*Come applicare larghezza spoiler
Larghezza immagini = 640px
Totale immagini = 5
Larghezza immagine sorvolata = 640px
Larghezza immagini non sorvolate = 60px - Potete settare questo valore a quanto volete
Larghezza totale spoiler = 640 + 60*4 = 880px + 5px (bordi) = 885px;
Larghezza di default = 880/5 = 176px;
*/

.spoiler {
   width: 880px; height: 320px;
   overflow: hidden;
   margin: 100px auto;
   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
   -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
   -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*Un piccolo hack per evitare problemi su alcuni browser*/
.spoiler ul {
   width: 2500px;
}

.spoiler li {
   position: relative;
   display: block;
   width: 176px;
   float: left;
   border-left: 1px solid #888;
   box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
   
   /*Effetti transizione*/
   transition: all 0.8s;
   -webkit-transition: all 0.8s;
   -moz-transition: all 0.8s;
}

/*Larghezza immagini non sorvolate*/
.spoiler ul:hover li {width: 60px;}

/*Larghezza immagine sorvolata*/
.spoiler ul li:hover {width: 640px;}


.spoiler li img {
   display: block;
}

/*Image title styles*/
.image_title {
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   left: 0; bottom: 0;   
width: 640px;   

}
.image_title a {
   display: block;
   color: #fff;
   text-decoration: none;
   padding: 20px;
   font-size: 16px;
}