How to set a background transparent linear-gradient on an image?

Issue

I need to set this css :

.opacity-down-gradient {
    background: transparent linear-gradient(180deg, #00000000 30%, #000000c6 100%) 0% 0% no-repeat padding-box;
}

To this image :

 <CarouselItem key={index} className='relative basis-[33%]'>
   <div className='custom-card-shadow relative h-[400px] rounded-lg'>
       {productSheet.cover?.contentUrl && (
            <img
                className='h-full w-full rounded-lg object-cover'
                src={productSheet.cover?.contentUrl}
                alt={productSheet.cover?.title ?? ""}
             />
         )}

When I apply the CSS class on my img, nothing appear. Why ?

Here is a playground

I am using tailwind and CSS.

Solution

The issue is that the gradient you've defined in the .opacity-down-gradient class is a background property, and applying it directly to an <img> tag won't work, because <img> tags don't support background properties like <div> tags do.

To get your desired effect, you need to wrap your <img> tag with a container <div> and apply the gradient to this container. Here's how you can do it:

1. Wrap the Image: Create a container around your tag.
2. Apply the Gradient: Assign the .opacity-down-gradient class to this container.
3. Ensure Image Visibility: Make sure the image is visible through the gradient. This can be achieved by positioning the image and the gradient overlay correctly.

Example of wrapping image and gradient background div with another div:

<CarouselItem key={index} className='relative basis-[33%]'>
    <div className='custom-card-shadow relative h-[400px] rounded-lg'>
        {productSheet.cover?.contentUrl && (
            <div className='relative h-full rounded-lg'>
                <img
                    className='h-full w-full rounded-lg object-cover absolute top-0 left-0'
                    src={productSheet.cover?.contentUrl}
                    alt={productSheet.cover?.title ?? ""}
                />
                <div className='opacity-down-gradient absolute top-0 left-0 h-full w-full rounded-lg'></div>
            </div>
        )}
    </div>
</CarouselItem>

You might need to tweak some stuff around but that should help get you in the right direction!

In reply to comments (playground featuring working code): playground to working effect (changed gradient color to red for visibility

Answered By - Winston Hsiao