如何使用尾风在悬停时向我的图像（不是背景）添加渐变过渡

Question

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

Answer 1

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 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 hover:opacity-50 " />      <div class="absolute -z-10 bg-gradient-to-t from-white via-gray-900 to-black h-[70vh] lg:h-[80vh] w-full" />    </div>