Jason Lucchesi desarrolló con HTML5 y CSS3, un sencillo pero vistoso slide de imágenes que muestra al pasar el puntero del mouse, una leyenda.
Implementación
Todo el código necesario para esta implmentación es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Slide in Captions</title>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div id="page-wrap">
<h1>Slide in Captions</h1>
<figure class="cap-left">
<img src="images/1.jpg" alt="">
<figcaption>A country road at sunset.</figcaption>
</figure>
<figure class="cap-right">
<img src="images/2.jpg" alt="">
<figcaption>Where fairies live.</figcaption>
</figure>
<figure class="cap-top">
<img src="images/3.jpg" alt="">
<figcaption>Fall harvest</figcaption>
</figure>
<figure class="cap-bot">
<img src="images/4.jpg" alt="">
<figcaption>The green and pleasant lands of the Shire in Eriador - just West of the Brandywine River and East of the Far Downs.</figcaption>
</figure>
<br style="clear: both;">
<section id="learninz">
<pre><code><figure>
<img src="yay.jpg" alt="">
<figcaption class="from-left">
yay!!!
</figcaption>
</figure></code></pre>
<style scoped contenteditable>figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
}
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
.cap-left:before { bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }</style>
</section>
</div>
</body>
</html>
Pareciera que fuera muy complejo, pero la mayor parte del código es la CSS.
Toda esta implmentación puede ser descargada desde el sitio CSS-Tricks en un archivo ZIP que continen el demo funcional.
Slide In Image Captions
Stio/Doc/Descargar: css-tricks.com/slide-in-image-captions