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%);

Servicios o productos disponibles:

Categorías de la tienda:

Pagina web Cali Servicio de diseño de sitios web en Ecuador desde Colombia. Diseño de tiendas virtuales en Cúcuta

Páginas de mi sitio:

Últimas 100 Entradas de blog:

Categorías de blog:

Deja un comentario