Puro CSS3 texto animado superposición en Hover

Vista prévia

Descripción

Con las transiciones y transformaciones CSS3, podemos agregar una superposición completa en una imagen que revele leyendas de texto animadas al pasar el cursor. Creado por < a href = "https://codepen.io/pdelsignore" target = "_ blank" rel = "noopener" > pdelsignore .

Funcionamiento

Inserte una imagen y leyendas de texto en un elemento contenedor con la clase CSS de ' Box '.

<div class="box"> <img src="1.jpg">

<div class="overbox">


<div class="title overtext"> Title </div>


<div class="tagline overtext"> Tagline </div>

</div>
</div>

El CSS para la imagen y el elemento contenedor.

.box {

cursor: pointer;

height: 300px;

position: relative;

overflow: hidden;

width: 400px;
}

.box img {

position: absolute;

left: 0;

-webkit-transition: all 300ms ease-out;

-moz-transition: all 300ms ease-out;

-o-transition: all 300ms ease-out;

-ms-transition: all 300ms ease-out;

transition: all 300ms ease-out;
}

El CSS para estilo y animar la superposición.

.box .overbox {

background-color: #304562;

position: absolute;

top: 0;

left: 0;

color: #fff;

z-index: 100;

-webkit-transition: all 300ms ease-out;

-moz-transition: all 300ms ease-out;

-o-transition: all 300ms ease-out;

-ms-transition: all 300ms ease-out;

transition: all 300ms ease-out;

opacity: 0;

width: 360px;

height: 240px;

padding: 130px 20px;
}

.box:hover .overbox { opacity: 1; }

El CSS para estilo y animar leyendas de texto.

.box .overtext {

-webkit-transition: all 300ms ease-out;

-moz-transition: all 300ms ease-out;

-o-transition: all 300ms ease-out;

-ms-transition: all 300ms ease-out;

transition: all 300ms ease-out;

transform: translateY(40px);

-webkit-transform: translateY(40px);
}

.box .title {

font-size: 2.5em;

text-transform: uppercase;

opacity: 0;

transition-delay: 0.1s;

transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {

opacity: 1;

transform: translateY(0px);

-webkit-transform: translateY(0px);
}

.box .tagline {

font-size: 0.8em;

opacity: 0;

transition-delay: 0.2s;

transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {

opacity: 1;

transform: translateX(0px);

-webkit-transform: translateX(0px);
}