Cómo - Ícono de superposición de imagen
Aprenda a crear un efecto de icono de superposición de imagen al pasar el mouse.
Icono de superposición de imagen
Pase el cursor sobre la imagen para ver el efecto de superposición.
Cómo crear un icono de imagen de superposición
Paso 1) Agregar HTML:
Ejemplo
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<a href="#"
class="icon" title="User Profile">
<i
class="fa fa-user"></i>
</a>
</div>
</div>
Paso 2) Agregar CSS:
Ejemplo
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
100%;
max-width: 400px;
}
/* Make the image to responsive */
.image {
width: 100%;
height: auto;
}
/*
The overlay effect (full height and width) - lays on top of the container and
over the image */
.overlay {
position: absolute;
top:
0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
/* When you mouse over the container, fade
in the overlay icon*/
.container:hover .overlay {
opacity: 1;
}
/*
The icon inside the overlay is positioned in
the middle vertically and horizontally */
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform:
translate(-50%, -50%);
text-align: center;
}
/* When you
move the mouse over the icon, change color */
.fa-user:hover {
color: #eee;
}
Sugerencia: vea también otros efectos de superposición de imágenes (desvanecimiento, deslizamiento, etc.) en nuestro Cómo - Superposición de desplazamiento de imagen .
Vaya a nuestro tutorial de imágenes CSS para obtener más información sobre cómo diseñar imágenes.