Subtítulos de CSS3 animados con efecto de zoom de imagen

Vista prévia

Descripción

Una leyenda de imagen animada con un sutil efecto de zoom de imagen sobre el desplazamiento, basado en transiciones y transformaciones CSS3.

Funcionamiento

Inserte una imagen en el documento.

<img src="1.jpg">

Cree una máscara con leyendas de texto en la imagen.

<div class="mask">

<h2>...</h2>

<p>...</p>
</div>

Todo el marcado HTML debe ser así.

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

<div class="mask">


<h2>...</h2>


<p>...</p>

</div>
</div>

Los estilos CSS principales.

.mask {

width: 100%;

height: 100%;

position: absolute;

overflow: hidden;

top: 0;

left: 0;
}

h2,
p {

margin: 20px 0 0 250px;

position: relative;

text-align: center;

color: #333;
}

h2 {

font-weight: normal !important;

font-family: 'Nova Square', cursive;

font-size: 22px;

text-transform: uppercase;

background: rgba(0, 0, 0, 0.8);

background: transparent;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;
}

p {

font-weight: normal !important;

font-family: verdana, sans-serif;

font-size: 18px;

text-align: center;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;
}

.box {

z-index: 9;

cursor: default;

overflow: hidden;

text-align: center;

position: relative;
}

img {

display: block;

left: 10px;

margin-left: -10px;

position: relative;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

-ms-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

width: 600px;

height: 350px;
}

Anime la imagen y las leyendas de texto al desplazar el ratón.

.box:hover > img {

-webkit-transform: scale(8);

-moz-transform: scale(8);

-o-transform: scale(8);

-ms-transform: scale(8);

transform: scale(8);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)";

filter: alpha(opacity=30);

opacity: 0.3;
}

.box:hover h2,
.box:hover p {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;
}