Sliding figure: animando el revelado del figcaption 20.3.13
Pequeño juego Css para mostrar de forma animada la leyenda o figcaption de una imagen al hacer :hover sobre ella y desplazando la mitad de la imagen hacia un lado y la otra mitad hacia el opuesto, quedando el texto entre ambas.
Sliding figure: animando el revelado del figcaption
Pequeño juego Css para mostrar de forma animada la leyenda o figcaption de una imagen al hacer :hover sobre ella, desplazando la mitad de la imagen hacia un lado y la otra mitad hacia el opuesto, quedando el texto entre ambas.
En esta ocasión para ahorrar trabajo, cálculos previos y código css sobre la imagen la propiedad que aporta la "miaja mágica" será una vieja conocida: clip. Complementada con transition.
Esta demo tiene a priori un pequeño detalle en su contra y que deberías sopesar si decides implementarla en alguna "producción": necesitamos incluir la imagen dos veces y se necesita conocer sus medidas a priori. Esto segundo nada grave si lo usas en una "galería" homogénea.
Si no necesitas la explicación que sigue ve directo a ver la demo en cualquiera de los siguientes enlaces. Es la misma en dos lugares distintos:
Demo en Jsfiddle
Demo en Codepen
Marcado Html
<figure class="puerta x">
<figcaption>Css a Fondo
<img src="ruta/img.ext" alt="" />
<img src="ruta/img.ext" alt="" />
</figure>
No tiene mayor secreto. Sólo un apunte sobre el uso de dos clases en el elemento figure: símplemente para hacer dos desplazamientos de la imagen: en una ocasión en vertical y otra en horizontal.
Css del Sliding figure
Los estilos generales y básicos de figure
.puerta {
background: #ff7361;
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
color: #fff;
}
No tienen mayor secreto. Está posicionado para ser el referente de sus hijos, tiene un tamaño definido e impedimos que nada sobresalga de él con overflow: hidden;.
El css de la leyenda
.x figcaption {
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 6rem;
line-height: 400px;
text-align: center;
}
Aquí sólo reseñable para quien se está iniciando en Css el centrado del texto en la vertical declarando en la altura de línea el mismo valor (400px) que tiene de alto el figcaption top: 0; bottom: 0; es computado como el 100% de su padre.
El Css de las imágenes
img {
position: absolute;
transition: .8s linear;
width: 100%; /*un seguro*/
}
.x img:nth-of-type(1) {clip: rect(0px,600px,200px,0px);}
.x img:nth-of-type(2) {clip: rect(200px,600px,600px,0px);}
.x:hover img:nth-of-type(1) {transform: translateY(-100px);}
.x:hover img:nth-of-type(2) {transform: translateY(100px);}
Las dos imágenes (que es la misma) están colocadas una sobre la otra position: absolute y al no definir en qué lugar lo hacen en la esquina superior derecha de su padre al estar también posicionado.
EL mostrar sólo una mitad u otra de la imagen se consigue con el corte que hace la propiedad clip. En la primera se recorta y muestra sólo la mitad superior y en la segunda la inferior.
De esta forma, se pueden desplazar las dos imágenes al hacer :hover sobre la caja padre, figure, sobre la parte central de la imagen compuesta por las dos mitades, simulando que se abre por el medio.
O lo veo o no lo creo
Cualquier artículo sobre Css no sirve de nada si no va acompañado de la obligada demostración, y más en mi caso que me explico como libro en blanco.
Así que aquí tienes todo lo anterior en las dos variantes: deslizando en la vertical y en la horizontal:
Si no carga el iframe anterior, puedes ver la demo en jsfiddle:
Ver demo
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Te falto este enlace para los olvidadizos xD
ResponderEliminarmuy buen post (Y), me gusta el diseño de tu pagina y saber que es un blog(blogger) muy buen trabajo haces la diferencia a los demás blogs
ResponderEliminar