JGallery con Effetto Fade v1.0

<div class="jgallery">
<ul>

<li><img src="http://dumpshare.net/images/713513slide2.jpg">
<div><h3>Into the wild</h3>
<p>There is a pleasure in the pathless woods, there is a rapture on the lonely shore, there is society, where none intrudes, by the deep sea, and music in its roar: I love not man the less, but Nature more.</p></div>
</li>

<li><img src="http://dumpshare.net/images/24713slide3.jpg">
<div><h3>Loneliness</h3>
<p>Quali dal vento le gonfiate vele | caggiono avvolte, poi che l'alber fiacca, | tal cadde a terra la fiera crudele.</p></div>
</li>

<li><img src="http://dumpshare.net/images/994218slide4.jpg">
<div><h3>Over the rainbow</h3>
<p>Ogni numero è zero di fronte all'infinito. L'inaccessibile unito all'impenetrabile, l'impenetrabile unito all'inespicabile, l'inespicabile unito all'incommensurabile: questo è il cielo.</p></div>
</li>

<li><img src="http://dumpshare.net/images/157058slide1.jpg">
<div><h3>Red October</h3>
<p>Rosso come un rubino immerso nel sangue, rosso come il ferro incandescente pronto per essere forgiato, rosso come un tizzone ardente di odio e rabbia, sopra le languide chiome apparve Castigo. </p></div>
</li>

</ul>
</div>

/* JGALLERY CON EFFETTO FADE - http://ffmagazine.forumfree.it/?t=63444176*/
/* Riquadro */
.jgallery {height: 340px; width: 800px; background: #FFF; box-shadow: 0 0 7px 1px rgba(0, 0, 0, .4); padding: 12px; overflow: hidden; font-family: georgia}
.jgallery ul {list-style: none; margin: 0; padding: 0; position: relative}
.jgallery ul li img {width: 100%; max-height: 300px}
/* FOTO */
.jgallery ul li {opacity: 0; visibility: hidden; position: absolute; top: 0;

-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-o-animation-name: anim_slides;
-o-animation-duration: 24.0s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards}

/* TITOLO + DESCRIZIONE */
.jgallery div {background: #FFF; position: absolute; top: 290px; left: 0; width: 100%; height: 60px; padding-top: 5px;

-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-o-animation-name: anim_titles;
-o-animation-duration: 24.0s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards}

.jgallery div h3, .jgallery div p {display: inline-block; padding: 12px}
/* Titolo */
.jgallery div h3 {float: left; width: 280px; font-weight: bold; font-size: 33px; text-align: right; border-right: 1px solid rgba(27, 54, 81, 0.4); letter-spacing: -1px; height: 30px}
/* Descrizione */
.jgallery div p {float: left; margin-top: -10px; font-family: constantia; font-style: italic; font-size: 14px; text-align: left; width: 55%; height: auto; line-height: 90%}

/* Ritardo di visualizzazione delle slides successive alla prima */
.jgallery ul li:nth-child(2), .jgallery ul li:nth-child(2) div {-webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; -o-animation-delay: 6.0s}
.jgallery ul li:nth-child(3), .jgallery ul li:nth-child(3) div {-webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; -o-animation-delay: 12.0s}
.jgallery ul li:nth-child(4), .jgallery ul li:nth-child(4) div {-webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; -o-animation-delay: 18.0s}

/* Keyframes FOTO */
@-webkit-keyframes anim_slides {0% {opacity: 0; visibility: hidden}
4.1% {opacity: 1; visibility: visible}
24.6% {opacity: 1; visibility: visible}
28.7% {opacity: 0; visibility: hidden}
100% {opacity: 0; visibility: hidden}}
@-moz-keyframes anim_slides {0% {opacity: 0; visibility: hidden}
4.1% {opacity: 1; visibility: visible}
24.6% {opacity: 1; visibility: visible}
28.7% {opacity: 0; visibility: hidden}
100% {opacity: 0; visibility: hidden}}
@-o-keyframes anim_slides {0% {opacity: 0; visibility: hidden}
4.1% {opacity: 1; visibility: visible}
24.6% {opacity: 1; visibility: visible}
28.7% {opacity: 0; visibility: hidden}
100% {opacity: 0; visibility: hidden}}

/* Keyframes TITOLO+DESCRIZIONE */
@-webkit-keyframes anim_titles {0% {top: 110%; opacity: 0; visibility: hidden}
4.1% {top: 103%; opacity: 1; visibility: visible}
20.5% {top: 103%; opacity: 1; visibility: visible}
24.6% {top: 103%; opacity: 0; visibility: hidden}
100% {top: 103%; opacity: 0; visibility: hidden}}  
@-moz-keyframes anim_titles {0% {top: 110%; opacity: 0; visibility: hidden}
4.1% {top: 103%; opacity: 1; visibility: visible}
20.5% {top: 103%; opacity: 1; visibility: visible}
24.6% {top: 103%; opacity: 0; visibility: hidden}
100% {top: 103%; opacity: 0; visibility: hidden}}
@-o-keyframes anim_titles {0% {top: 110%; opacity: 0; visibility: hidden}
4.1% {top: 103%; opacity: 1; visibility: visible}
20.5% {top: 103%; opacity: 1; visibility: visible}
24.6% {top: 103%; opacity: 0; visibility: hidden}
100% {top: 103%; opacity: 0; visibility: hidden}}