如何使用Tailwind CSS实现渐变背景与循环图片的悬停融合效果

已尝试的排查操作 #

• 测试了所有CSS混合模式
• 调整两张叠放图片的层级顺序
• 修改悬停状态下各图层的透明度
  以上操作均未实现目标效果。

当前实现代码 #

<div className="grid grid-cols-3 px-{100}">
  {gallery.map((el, i) => {
    return (
      <>
        <div className="group object-cover">
          <p className="items-center text-2xl text-brand-primary transition-all duration-500 opacity-0 group-hover:opacity-100 absolute flex pl-[32px] pt-[411px]">{gallery[i].title}</p>
          <div className='mix-blend-add'>
            <img className="bg-auto absolute  opacity:0 h-[57%] group-hover:opacity-100 h-full" src='/rectangle.svg' />
            <img className="duration-500 transition-all opacity:90 group-hover:opacity-50 delay-100 text-white" src={gallery[i].imgSrc} />
            {/* <div class="absolute -z-10 bg-gradient-to-t from-white via-gray-900 to-black h-[70vh] lg:h-[80vh]" /> */}
          </div>
        </div>

效果对比 #

• 预期悬停效果：
• 实际运行效果：（图中第一张卡片为悬停状态，第二张为默认非悬停状态）

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