Cajas adaptables (RWD) con contenido posicionado y efecto texto deslizante

A veces, para destacar una entrada recomendada, un banner lateral o una imagen con descripción en nuestro blog, nos empeñamos en instalar plugins pesados o scripts de JavaScript kilométricos. Sin embargo, con un poco de ingenio y CSS puro, podemos conseguir resultados profesionales, ultrarrápidos y totalmente adaptables (Responsive Web Design) sin sobrecargar la página.

Hoy vamos a rescatar un clásico que nunca pasa de moda: un contenedor de imagen con proporción fija (que no tamaño) y una capa de texto oculta que se desliza suavemente al pasar el cursor. ¡Todo ello sin una sola línea de JavaScript!

Esta sería la demo.
- Para ver el texto sólo hay que pasar el puntero por encima.
- Para ver cómo la imagen dentro del interior de la caja con borde negro se va posicionando, ya tendrás que hacer alternativamente más grande y más pequeña la ventana de tu navegador.

¿Ode to my family o Zombie? ¿Recuerdos o éxito? The Cranberries

¿Cómo funciona este truco?

El secreto de este bloque reside en dos piezas técnicas clave:

El truco de la proporción con padding-top: Para evitar que la caja salte o se deforme mientras carga la imagen, se utiliza un truco clásico de CSS donde el padding-top en porcentaje sobre un contenedor estricto, obliga al navegador a mantener una altura proporcional al ancho, sin importar la pantalla.
El posicionamiento absoluto y las transiciones: La imagen se estira para ocupar el 100% de la caja, mientras que el párrafo de texto se esconde fuera del visor (bottom: -100%). Gracias a transition, al hacer hover sobre el contenedor, el texto sube con suavidad (bottom: 0) cambiando de color.

El estilo tu plantilla sería el siguiente y debes añadirlo en la sección CSS de tu tema, antes de la etiqueta ]]></b:skin>:

.contenedorsli {
width: 400px;
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
#slider {
position: relative;
overflow: hidden;
width: 100%;
border: 4px solid #333;
margin: 0 auto;
padding: 0;
padding-top: calc(100% - 8px); /* Restamos el equivalente al grosor de los bordes. Si no tuviera bordes sería simplemente 100% para un cuadrado. Prueba a cambiar este valor para ver otras proporciones*/
box-sizing: border-box;
}
#slider > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0;
}
#slider img {
width: 100%;
max-width: 100% !important;
height: auto !important;
margin: 0;
padding: 0;
border: 0;
object-fit: cover;
display: block;
}
#slider p {
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
margin: 0;
padding: 10px;
color: #fff;
background: #333;
font-size: 16px;
line-height: 22px;
text-align: center;
border-radius: 30px 30px 0 0;
filter: alpha(opacity=90);
opacity: .9;
box-sizing: border-box;
transition: all .5s;
}
#slider:hover p {
bottom: 0;
background: #990000;
}

A partir de que tengas eso, cada vez que quieras insertar esta caja interactiva en un artículo, solo tienes que utilizar el siguiente código HTMLen tu editor (recuerda cambiar las URLs y el texto por los tuyos):

<div class="contenedorsli">
<div id="slider">
<div>
<a href="URL_DESTINO" target="_blank">
<img src="URL_IMAGEN">
<p>TEXTO</p>
</a>
</div>
</div>
</div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Copy URL