Tailwind Linear Gradient in Image

Issue

How to apply linear gradient in the image using tailwind,
I tried two version of this code but its not working

This one not working:

      <div>
        <img src={BannerImage} alt="BannerImage" className="h-[70vh] lg:h-[80vh] w-full object-cover object-right bg-gradient-to-r from-cyan-500 to-blue-500" />
      </div>

This one also not working:

      <div className="bg-gradient-to-r from-cyan-500 to-blue-500">
        <img src={BannerImage} alt="BannerImage" className="h-[70vh] lg:h-[80vh] w-full object-cover object-right" />
      </div>

The Result I Want
The Result I Got

Solution

The closest I can achieve is this ,

<div class="relative mix-blend-overlay">
  <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="BannerImage" class="absolute h-[70vh] lg:h-[80vh] w-full object-cover object-right opacity-30 " />
  <div class="absolute -z-10 bg-gradient-to-t from-white via-black to-black h-[70vh] lg:h-[80vh] w-full" />
</div>

Refer this https://play.tailwindcss.com/fq9cdlFfCt

Answered By - MagnusEffect