El lector Jason Lucchesi me envió una demostración ordenada de leyendas de imágenes que se deslizan sobre una imagen en rollover. El efecto usó un montón de divs anidados para hacerlo, así que pensé en hacer mi propia versión usando la estructura HTML5 estándar para una imagen con un título y CSS3.
Ver demostración Descargar archivos
¿Por qué hacer algo como esto en absoluto? Quizás ahorrando espacio en un diseño. Quizás los subtítulos en sí mismos son una distracción en un diseño específico y es más limpio revelarlos solo de forma condicional. No sé, es solo una demostración. Si no te gusta, no lo uses.
Estructura HTML5
Nada aquí más que el marcado puro y semántico de una imagen con título.
<figure>
<img src="https://css-tricks.com/slide-in-image-captions/yay.jpg" alt="">
<figcaption>
yay!!!
</figcaption>
</figure>Estructura CSS
El figure element envuelve todo y es nuestro componente básico. Los conceptos de empoderamiento comienzan aquí. El figure tendrá que tener position: relative; por lo que podemos colocar absolutamente el pie de foto exactamente donde lo queremos y que no ocupe ningún espacio adicional. También necesitamos overflow: hidden; así como hacemos nuestro deslizamiento, el título desaparece fuera del límite de la figure.
figure {
display: block;
position: relative;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
}Acción de deslizamiento caliente
Necesitamos ocultar los subtítulos para que podamos revelarlos con una acción de deslizamiento en caliente cuando se gira la imagen. Coloquemos el pie de foto un poco más allá de la esquina inferior izquierda y ocultémoslo por completo con opacidad. Luego, cuando la figura esté suspendida, la deslizaremos en su lugar y ajustaremos la opacidad nuevamente. Para que se deslice realmente, usaremos transition.
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}opciones, opciones
En la demostración, la posición y la dirección de deslizamiento son diferentes en cada una de las imágenes. Hacemos eso simplemente agregando nombres de clase a las figuras y colocando cosas diferentes según las clases.
<figure class="cap-top">.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }Entonces, ¿cómo sabe la gente que hay un subtítulo?
Si va a pasar por la molestia de tener subtítulos elegantes, sería una pena (léase: UX FAIL) si no hubiera indicios de que estuvieran allí. Indiquemos la presencia de una leyenda con un sutil indicador de signo de interrogación. En lugar de usar marcas adicionales no semánticas para hacer esto, usaremos contenido generado en forma de un pseudo elemento en la figura.
figure:before {
content: "?";
position: absolute;
background: rgba(255,255,255,0.75);
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;
/* Only Fx 4 supporting transitions on psuedo elements so far... */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}Tenga en cuenta que no hay valores de posicionamiento en el CSS anterior, a pesar de la position: absolute;. La posición dependerá de las clases de opciones que configuremos. Probablemente querrá colocar el signo de interrogación en la esquina en la que se desliza el título. Asi como:
.cap-left:before { bottom: 10px; left: 10px; }Uso
Como todo lo que encuentres en este sitio. Por favor, use esto en lo que quiera, por favor. Preferiblemente proyectos corporativos grandes y sofisticados en los que le dices a tu jefe que todo fue idea tuya y obtienes un gran aumento.