如何添加渐变过渡到我的图像(不是背景)在悬停使用顺风

Question

我想在IMAGE hover上添加渐变颜色#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>