Crear una capa superpuesta sobre una imagen con CSS
Hoy vamos a crear un efecto bastante habitual en interfaces web: una capa superpuesta sobre una imagen que aparece al pasar el ratón por encima y que nos permite mostrar, por ejemplo, los iconos de nuestras redes sociales.
La idea es sencilla: tendremos una imagen y, cuando el usuario pase el ratón sobre ella, aparecerá una capa semitransparente con los enlaces sociales.
En el ejemplo original utilizaba Font Awesome para los iconos y Bootstrap para parte de la estructura. En esta versión voy a simplificar el código para centrarnos en lo realmente importante: HTML + CSS.
¿Qué vamos a conseguir?
Una imagen circular que, al pasar el ratón por encima, mostrará una capa oscura semitransparente junto con varios iconos de redes sociales.
La estructura HTML
Antes de meternos con el CSS, vamos a construir la estructura que necesitamos.
La idea es tener un contenedor principal, nuestra imagen y, por encima de ella, dos elementos:
- Una capa semitransparente que oscurecerá la imagen.
- Un contenedor con los iconos de las redes sociales.
El HTML puede quedar así:
<div class="social-card">
<div class="image-wrapper">
<img
src="imagenes/blogPortada.jpg"
alt="Perfil de Serna Studio"
class="profile-image"
>
<div class="overlay"></div>
<div class="social-links">
<a href="#" aria-label="Instagram" title="Instagram">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a href="#" aria-label="Facebook" title="Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="#" aria-label="Twitter" title="Twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>
</div>
<p>
<strong>SERNA STUDIO</strong> |
<small>DISEÑO Y DESARROLLO WEB PARA TODOS</small>
</p>
</div>
He separado cada responsabilidad en su propio elemento para que sea más sencillo entender qué está ocurriendo.
Preparando la imagen
Ahora vamos a darle forma a nuestra imagen.
En este ejemplo quiero que sea circular, así que utilizaremos border-radius: 50%.
.social-card {
text-align: center;
}
.image-wrapper {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
}
.profile-image {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
Hay una propiedad especialmente interesante aquí:
object-fit: cover;
De esta manera, si la imagen original no tiene exactamente las mismas proporciones que nuestro contenedor, podremos mantener el tamaño de la imagen sin deformarla.
Creando la capa superpuesta
Ahora llega la parte importante.
Necesitamos colocar una capa encima de la imagen. Para ello, el contenedor de la imagen debe tener:
position: relative;
Y nuestra capa podrá posicionarse de forma absoluta respecto a él:
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease;
}
La propiedad:
inset: 0;
es una forma abreviada de indicar que queremos que la capa ocupe todo el espacio disponible:
top: 0; right: 0; bottom: 0; left: 0;
Y aquí tenemos otra propiedad fundamental:
opacity: 0;
Inicialmente la capa estará completamente transparente.
Cuando el usuario pase el ratón por encima, cambiaremos su opacidad.
Mostrando el overlay al pasar el ratón
Para ello utilizaremos el selector :hover:
.image-wrapper:hover .overlay {
opacity: 1;
}
Y con una sola regla conseguimos que la capa aparezca al situar el cursor sobre la imagen.
La transición que hemos definido anteriormente:
transition: opacity 0.4s ease;
hace que la aparición no sea instantánea, sino que se produzca de forma progresiva.
Colocando los iconos sobre la imagen
Ahora necesitamos colocar nuestros enlaces justo encima de la capa.
.social-links {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 2;
}
Gracias a Flexbox, podemos centrar los iconos tanto vertical como horizontalmente sin tener que recurrir a márgenes extraños ni a posicionamientos manuales.
Ahora hacemos que aparezcan cuando pasemos el ratón sobre la imagen:
.image-wrapper:hover .social-links {
opacity: 1;
}
Y ya tenemos las dos piezas principales del efecto:
Imagen ↓ Overlay semitransparente ↓ Iconos sociales
Estilizando los enlaces
Nos queda darle un poco de estilo a nuestros iconos.
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #fff;
text-decoration: none;
font-size: 18px;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.social-links a:hover,
.social-links a:focus-visible {
color: #2baab1;
transform: translateY(-3px);
}
Además de cambiar el color cuando pasamos el ratón por encima, he añadido un pequeño desplazamiento vertical:
transform: translateY(-3px);
Es un detalle pequeño, pero ayuda a que el elemento tenga algo más de interacción visual.
El CSS completo
Si queremos tener todo el CSS junto, podemos utilizar el siguiente:
.social-card {
text-align: center;
}
.image-wrapper {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
}
.profile-image {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease;
}
.social-links {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 2;
}
.image-wrapper:hover .overlay,
.image-wrapper:hover .social-links {
opacity: 1;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #fff;
text-decoration: none;
font-size: 18px;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.social-links a:hover,
.social-links a:focus-visible {
color: #2baab1;
transform: translateY(-3px);
}
¿Qué hemos conseguido?
Con unas pocas reglas de CSS tenemos una imagen circular que funciona como una pequeña tarjeta de perfil.
Al pasar el ratón sobre ella:
- Aparece una capa oscura semitransparente.
- Los iconos sociales aparecen centrados.
- Los iconos tienen una pequeña animación al interactuar con ellos.
- La transición se realiza de forma progresiva.
Y lo interesante es que no necesitamos JavaScript para conseguirlo.
¿Y en dispositivos móviles?
Aquí hay un pequeño detalle que merece la pena comentar.
El ejemplo original estaba pensado principalmente para la interacción mediante hover. En un ordenador esto funciona perfectamente porque tenemos un cursor que puede situarse sobre la imagen.
En un dispositivo táctil, sin embargo, no existe necesariamente ese mismo comportamiento de :hover.
Si queremos que los enlaces sean accesibles también desde dispositivos móviles, podemos plantear una interacción diferente, por ejemplo mostrando los enlaces directamente o utilizando un botón para activar el overlay.
Para un ejemplo sencillo, podemos mantener el efecto visual y asegurarnos de que los enlaces siguen siendo elementos reales y accesibles:
@media (hover: none) {
.overlay,
.social-links {
opacity: 1;
}
}
Con esto, en dispositivos que no dispongan de hover, la capa y los iconos permanecerán visibles.
Dependiendo del diseño final, podríamos optar por una solución más elaborada, pero para este ejemplo es suficiente.
El resultado
El concepto es bastante sencillo: utilizamos un contenedor con position: relative y colocamos sobre la imagen diferentes elementos mediante position: absolute.
Después controlamos su visibilidad utilizando opacity y :hover.
El resultado es un efecto que podemos utilizar para perfiles, portfolios, galerías, equipos de trabajo o cualquier otro elemento donde queramos mostrar información adicional sobre una imagen.
Y aquí puedes ver el resultado del ejemplo original:
Conclusión
Una vez más, CSS nos permite conseguir efectos bastante resultones sin necesidad de añadir JavaScript ni complicar demasiado el código.
La clave está en entender bien tres conceptos:
- position: relative para establecer el contexto del elemento.
- position: absolute para colocar la capa y los iconos sobre la imagen.
- opacity + transition para controlar la aparición de los elementos.
A partir de aquí podemos personalizar prácticamente todo: colores, tamaños, animaciones, iconos, formas y tiempos de transición.
Y como siempre, no hace falta quedarse con el ejemplo tal cual. La gracia está en coger la idea, desmontarla y adaptarla a lo que necesitemos.
¡A darle caña al CSS!.
Visitas: 735
Automation & Data Specialist | Web Development | Data Processing & Integration