如何使用顺风在悬停时向我的图像(而不是背景)添加梯度过渡

Question

我想把#323232的渐变颜色(0%在顶部，90%在底部)在图像悬停，但我只是改变了它的bg。我试图改变不透明度&改变颜色，但它仍然是一个坚实的颜色，而不是渐变。

这是我的密码

<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>

这就是我想要的样子：单击此处

Answer 1

您可以添加图像悬停，方法是将div放置在图像下方，并将梯度应用于此div，然后在图像悬停时，可以更改图像的不透明度。

我已经把黑白两色，但是你用你的颜色选择。

下面是密码，

​

    <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>

​