Slide Caption con HTML5 y CSS3

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.

Slide Caption con HTML5 y CSS3

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>&lt;figure&gt;
&lt;img src=&quot;yay.jpg&quot; alt=&quot;&quot;&gt;
&lt;figcaption class=&quot;from-left&quot;&gt;
yay!!!
&lt;/figcaption&gt;
&lt;/figure&gt;</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

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT