Superposición de imagen animada con escala de imagen

Vista prévia

Descripción

Técnica pura HTML5 y CSS/CSS3 para crear una superposición de subtítulos animados sobre la imagen con efectos sutiles de escala de imagen cuando el ratón pasa el mouse.

Funcionamiento

Inserte una imagen con la leyenda de texto utilizando HTML5 figura y figcaption etiquetas.

<figure>

<img src="demo.jpg" alt="Thumb" width="400" height="300">

<figcaption><div>Thumbnail Caption</div></figcaption>
</figure>

Las reglas CSS/CSS3 requeridas para crear una superposición de subtítulos animados y los efectos de escala de imagen.

figure{

width: 400px;

height: 300px;

overflow: hidden;

position: relative;

display: inline-block;

vertical-align: top;

border: 5px solid #fff;

box-shadow: 0 0 5px #ddd;

margin: 1em;
}

figcaption{

position: absolute;

left: 0; right: 0;

top: 0; bottom: 0;

text-align: center;

font-weight: bold;

width: 100%;

height: 100%;

display: table;
}

figcaption div{

display: table-cell;

vertical-align: middle;

position: relative;

top: 20px;

opacity: 0;

color: #2c3e50;

text-transform: uppercase;
}

figcaption div:after{

position: absolute;

content: "";

left: 0; right: 0;

bottom: 40%;

text-align: center;

margin: auto;

width: 0%;

height: 2px;

background: #2c3e50;
}

figure img{

-webkit-transition: all 0.5s linear;





transition: all 0.5s linear;

-webkit-transform: scale3d(1, 1, 1);





transform: scale3d(1, 1, 1);
}

figure:hover figcaption{
 background: rgba(255,255,255,0.3);
}

figcaption:hover div{

opacity: 1;

top: 0;
}

figcaption:hover div:after{

width: 50%;
}

figure:hover img{

-webkit-transform: scale3d(1.2, 1.2, 1);





transform: scale3d(1.2, 1.2, 1);
}