how to add gradient transition to my image (not background) on hover using tailwind-CodePudding

i want to put gradient color of #323232 (0% on the top and 90% on the bottom) on IMAGE hover but instead i only changed its bg. i tried to change the opacity & change the color but it's still a solid color not gradient.

this is my code

<Layout>
      <Container>
        <div className="grid grid-cols-3 px-{100}">
          {gallery.map((el, i) => {
            return (
              <img className="transition duration-500 transition-all hover:bg-primary-hover hover:opacity-10 delay-100" src={gallery[i].imgSrc} />
            )
          })}
        </div>
      </Container>
    </Layout>

this is how i wanted it to be: click here

CodePudding user response：

You can add the image hover by placing a div below the image and applying the gradient to this div, then on hovering the image, you can change the opacity of image.

I had put black and white color, however you use your choice of colour.

Below is the code,

    <script src="https://cdn.tailwindcss.com"></script>

    <div >
      <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="BannerImage"  />
      <div  />

    </div>

CodePudding user response：

Have you tried the solution of tailwind docs ?

https://tailwindcss.com/docs/gradient-color-stops#applying-conditionally