1

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

Comma
  • 35
  • 2
  • 6
  • https://stackoverflow.com/questions/67344478/tailwind-css-how-to-apply-background-image-with-linear-gradient – Behnam Asaei Jun 12 '22 at 08:13
  • Does this answer your question? [Tailwind CSS: how to apply background image with linear gradient?](https://stackoverflow.com/questions/67344478/tailwind-css-how-to-apply-background-image-with-linear-gradient) – Anton Jun 12 '22 at 11:52

1 Answers1

1

The closest I can achieve is this ,

<div class="relative">
  <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

MagnusEffect
  • 3,363
  • 1
  • 16
  • 41