Como hacer un overlay con degradado de abajo hacia arriba usando css y tailwind

Joel Aviles — Thu, 27 Oct 2022 03:29:45 +0000

Para este ejemplo estaré usando imágenes del api de lorem picsum y la etiqueta <picture>, para la nomenclatura clases en css usare BEM y las utilidades Tailwind

Demo en codi.link

Css

1️⃣ HTML

<picture class="overlay">
    <img class="overlay__image" src="https://picsum.photos/id/238/300/400" alt="perro">
    <h1 class="overlay__text">Css</h1>
</picture>

2️⃣ CSS

Variables css

:root {
    --overlay-width: 150px;
    --overlay-height: 200px;
}

Clase overlay

.overlay {
    width: var(--overlay-width);
    height: var(--overlay-height);
    position: relative;
}

.overlay::before {
    content: '';
    width: var(--overlay-width);
    height: var(--overlay-height);
    position: absolute;
    background: linear-gradient(to top, #1e293b, #ffffff00);
}

Clase overlay__image

.overlay__image {
    width: var(--overlay-width);
    height: var(--overlay-height);
}

Clase overlay__text

.overlay__text {
    position: absolute;
    color: #d1d5db;
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
    left: 0.75rem; /* 12px */
    bottom: 1rem; /* 16px */
}

3️⃣ Resultado

Tailwind

1️⃣ HTML

<picture class="w-80 h-96 relative before:w-80 before:h-96 before:absolute before:bg-gradient-to-t before:from-slate-800">
    <img class="w-80 h-96 object-cover" src="https://picsum.photos/id/237/300/400" alt="cuidad">
    <h1 class="absolute bottom-4 left-3 text-2xl text-gray-300">Tailwind</h3>
</picture>

Forem: Joel Aviles

Como hacer un overlay con degradado de abajo hacia arriba usando css y tailwind

Css

1️⃣ HTML

2️⃣ CSS

Variables css

Clase overlay

Clase overlay__image

Clase overlay__text

3️⃣ Resultado

Tailwind

1️⃣ HTML

2️⃣ Resultado