<html>
<head>
<style>
.hover-img {
background-color: #000;
color: #fff;
display: inline-block;
margin: 8px;
max-width: 320px;
min-width: 240px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.hover-img figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.1em;
opacity: 0;
z-index: 2;
transition-delay: 0.1s;
font-size: 20px;
font-family: sans-serif;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.hover-img:hover img { /* oscurecer la imagen */
opacity:0.6;
}
.hover-img:hover figcaption { /* Mostrar el texto de invisible a visible */
opacity: 1;
}
.hover-img h2 {
font-size: 1.3em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.5);
transform: scale(1.5);
.hover-img:hover h2 {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
</style>
</head>
<body>
<figure class="hover-img">
<img src="https://picsum.photos/id/200/440/320.jpg">
<figcaption>
<h2>En un lugar de la mancha</h2>
</figcaption>
</figure>
</body>
</html>
Más información en: https://www.30secondsofcode.org/css/s/image-overlay-hover/
No hay comentarios:
Publicar un comentario