Aplicar con css un fondo superpuesto tipo “overlay” a la imagen dentro del contenedor

por

Aplicar con css un fondo superpuesto tipo “overlay” a la imagen dentro del contenedor.

Aplicar un fondo superpuesto tipo “overlay” a la imagen dentro del contenedor .cover en el bloque .listing-pub. Aquí se explica cómo funciona esa parte del CSS:

🎯 Regla de CSS:

.listing-pub .cover:after {
    content: "";
    position: absolute;
    background: linear-gradient(0deg, #0000008f 0%, transparent 20%);
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

🔍 ¿Qué hace esta regla?.

  1. :after pseudo-elemento: Crea un elemento virtual que se muestra encima del contenido de .cover.
  2. position: absolute;: El overlay se posiciona de forma absoluta dentro del contenedor .cover (que debe tener position: relative o similar).
  3. background: linear-gradient(...): Aplica un degradado lineal desde un color oscuro semitransparente (#0000008f) en la parte inferior hacia transparente en la parte superior (esto da un efecto sombreado).
  4. width: 100%; height: 100%: El overlay cubre toda el área del .cover.
  5. left: 0; top: 0: Posicionado desde la esquina superior izquierda.

🧠 Especificidad:

La línea que mencionas:

textCopiarEditar
Specificity: (0,2,1)

Se refiere a cuán específico es el selector .listing-pub .cover:after. Esto tiene:

  • 0 IDs
  • 2 clases (.listing-pub y .cover)
  • 1 pseudo-elemento (:after)

🖼️ ¿Qué efecto se ve?.

Visualmente, este código provoca que sobre la imagen de perfil de la chica (“Susy”) aparezca una sombra degradada negra en la parte inferior. Esto sirve generalmente para:

  • Mejorar la legibilidad de texto superpuesto.
  • Dar un look más profesional.
  • Indicar un estado visual como “activo” o “disponible”.

Si quieres modificar ese efecto (por ejemplo, hacerlo más transparente o eliminarlo), podrías cambiar o eliminar esta línea:

cssCopiarEditar

background: linear-gradient(0deg, #0000008f 0%, transparent 20%);

Páginas de mi sitio:

Servicios o productos disponibles:

Categorías de la tienda:

Entradas de blog:

100 entradas:

Otras 100:

Otras 100 entradas:

Otras 100 entradas:

Categorías de blog:

Deja un comentario