如何使用Tailwind CSS实现图片悬停时的渐变遮罩过渡效果

你当前的代码无法实现预期效果，核心问题有3个：

• <img>是替换元素，直接给标签加background属性，背景会渲染在图片资源下层，只要图片本身不是透明的，就完全看不到背景效果
• 你使用的hover:bg-primary-hover是纯色背景类，本身不具备渐变属性，搭配的hover:opacity-10是把整张图片的透明度改成10%，自然出不来从顶部到底部透明度渐变的叠加效果
• 代码里写的px-{100}是无效Tailwind类名，Tailwind不支持大括号插值的写法，这个类不会生效

不要直接给img标签加效果，给每个图片套一层相对定位的父容器，用独立的遮罩层实现渐变叠加：默认状态下遮罩完全透明，鼠标悬停在容器上时遮罩显示，渐变参数直接按你的需求写为「顶部#323232完全透明，底部#323232 90%不透明」即可。
修正后的可运行代码如下：

<Layout>
  <Container>
    <div className="grid grid-cols-3 px-[100px]">
      {gallery.map((el) => {
        return (
          <div className="relative overflow-hidden group">
            <img 
              className="w-full h-full object-cover" 
              src={el.imgSrc}
              alt="gallery image"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-[#32323200] to-[#323232e6] opacity-0 group-hover:opacity-100 transition duration-500 delay-100 pointer-events-none"></div>
          </div>
        )
      })}
    </div>
  </Container>
</Layout>

• 外层容器加relative overflow-hidden group：relative给内部遮罩提供定位基准，overflow-hidden避免遮罩溢出图片边界，group用来实现父容器悬停时控制子元素状态的交互
• 遮罩层用absolute inset-0铺满整个容器，渐变类bg-gradient-to-b表示从上到下的线性渐变：from-[#32323200]对应顶部完全透明的#323232，to-[#323232e6]对应底部90%不透明度的#323232（十六进制后两位e6对应90%不透明度）
• 遮罩默认opacity-0，父容器悬停时触发group-hover:opacity-100，搭配transition duration-500 delay-100实现平滑的淡入过渡效果，和你原本想要的动效时长一致
• 遮罩加pointer-events-none，避免遮罩层挡住图片本身的点击、拖拽等交互事件
• 修正了原代码的冗余/错误写法：把无效的px-{100}改成Tailwind支持的任意值写法px-[100px]，去掉重复声明的transition/transition-all，遍历时直接用回调参数里的el取图片地址，不需要再通过索引回查数组项

内容的提问来源于stack exchange，提问作者Flo