Superposición de imagen transparente flotante con CSS puro/CSS3

Vista prévia

Descripción

Una técnica CSS/CSS3 pura para crear una superposición animada & transparente que cubra la imagen cuando está roncada, lo cual es bueno para crear efectos de desplazamiento de imagen convincente para su sitio web de Galería/portafolio. Creado por < a href = "https://codepen.io/hugo/" target = "_ blank" rel = "noopener" > Hugo .

Funcionamiento

Inserte una imagen en el documento.

<img class="media__image" src="1.jpg">

Añada una superposición con la leyenda de texto a la imagen.

<div class="media__body">

<h2>Image Title</h2>

<p>Description</p>
</div>

Todo el marcado sería algo como esto:

<div class="media"><img class="media__image" src="1.jpg">

<div class="media__body">


<h2>Image Title</h2>


<p>Description</p>

</div>
</div>

Los estilos CSS/CSS3 requeridos.

.media {

display: inline-block;

position: relative;

vertical-align: top;
}

.media__image { display: block; }

.media__body {

background: rgba(41, 128, 185, 0.7);

bottom: 0;

color: white;

font-size: 1em;

left: 0;

opacity: 0;

overflow: hidden;

padding: 3.75em 3em;

position: absolute;

text-align: center;

top: 0;

right: 0;

-webkit-transition: 0.6s;

transition: 0.6s;
}

.media__body:hover { opacity: 1; }

.media__body:after,
.media__body:before {

border: 1px solid rgba(255, 255, 255, 0.7);

bottom: 1em;

content: '';

left: 1em;

opacity: 0;

position: absolute;

right: 1em;

top: 1em;

-webkit-transform: scale(1.5);

-ms-transform: scale(1.5);

transform: scale(1.5);

-webkit-transition: 0.6s 0.2s;

transition: 0.6s 0.2s;
}

.media__body:before {

border-bottom: none;

border-top: none;

left: 2em;

right: 2em;
}

.media__body:after {

border-left: none;

border-right: none;

bottom: 2em;

top: 2em;
}

.media__body:hover:after,
.media__body:hover:before {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

opacity: 1;
}

.media__body h2 { margin-top: 0; }

.media__body p { margin-bottom: 1.5em; }