Tailwind中Div Hover背景渐变过渡无效果问题求助

尝试在鼠标悬停Div时实现渐变背景色切换，当前颜色切换正常，但平滑过渡效果未生效。已在目标Div添加transition属性，却无法实现类似图标那样的平滑效果。

相关组件代码 #

ProjectItem组件 #

import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { FaExternalLinkAlt, FaGithubSquare } from 'react-icons/fa'

const ProjectItem = ({ title, alt, tech, bgImg, projectURL, githubURL }) => {
    return (
        <div className='border relative flex items-center justify-center h-auto w-full shadow-xl shadow-gray-200 rounded-xl p-4 group transition bg-white hover:bg-gradient-to-r from-[#001f54] to-[#002668]'>
            <Image src={bgImg} alt={alt} className='rounded-xl group-hover:opacity-10' />
            <div className='hidden group-hover:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]'>
                <h3 className='text-2xl text-white tracking-wider text-center'>{title}</h3>
                <p className='pb-4 pt-2 text-white text-center'>{tech}</p>
                <div className='flex justify-center gap-6'>
                    <div className='rounded-full shadow-lg bg-slate-100 p-4 cursor-pointer transition hover:bg-lite-blue hover:text-slate-100 hover:scale-105 ease-in duration-75'>
                        <Link href={githubURL} title='GitHub Repo' target='_blank' rel='noopener noreferrer'>
                            <FaGithubSquare size={30} />
                        </Link>
                    </div>
                    <div className='rounded-full shadow-lg bg-slate-100 p-4 cursor-pointer transition hover:bg-lite-blue hover:text-slate-100 hover:scale-105 ease-in duration-[0ms]'>
                        <Link href={projectURL} title='Deployed Project' target='_blank' rel='noopener noreferrer'>
                            <FaExternalLinkAlt size={30} />
                        </Link>
                    </div>
                </div>
            </div>
        </div>

    )
}

export default ProjectItem

Projects组件 #

import React from 'react'
import weatherApp from '../public/assets/weatherapp.png'
import firesale from '../public/assets/firesale-final.png'
import ProjectItem from './ProjectItem'

const Projects = () => {

    const projItemArr = [
        { title: "OpenWeather API Forecast Checker", alt: "Weather Forecasting Application", tech: "JavaScript, Bulma", bgImg: weatherApp, projectURL: "https://dopecello.github.io/weather-app/", githubURL: "https://github.com/dopecello/weather-app" },
        { title: "SupaHot Online Marketplace", alt: "SupaHot Online Marketplace", tech: "CRA, GraphQL, MongoDB", bgImg: firesale, projectURL: "https://supa-hot-firesales.herokuapp.com/", githubURL: "https://github.com/brian-gee/supa-hot-firesale" },
    ]

    return (
        <div id='projects' className='w-full xl:pt-[13rem] xl:pb-[5rem]'>
            <div className='max-w-[1240px] mx-auto px-2 pt-10 pb-10'>
                <p className='text-xl tracking-widest uppercase py-6 text-lite-blue'>Projects</p>
                <div className='grid md:grid-cols-2 gap-8'>
                    {projItemArr.map((index) => {
                        return (
                            <ProjectItem key={index}
                                title={index.title}
                                alt={index.alt}
                                tech={index.tech}
                                bgImg={index.bgImg}
                                githubURL={index.githubURL}
                                projectURL={index.projectURL}
                            />
                        )
                    })}
                </div>
            </div>
        </div>
    )
}

export default Projects

CSS无法直接在background-color（静态白色）和background-image（渐变背景，hover时的bg-gradient-to-r属于该属性）之间创建过渡动画，二者属于不同类型的背景属性，transition无法识别这种跨类型的属性变化。

通过伪元素叠加背景的方式实现平滑过渡，具体修改步骤如下：

1. 调整ProjectItem的外层div结构，移除原有的bg-white和hover:bg-gradient-to-r类，改为用伪元素承载渐变背景：

<div className='border relative flex items-center justify-center h-auto w-full shadow-xl shadow-gray-200 rounded-xl p-4 group bg-white'>
  {/* 新增伪元素用于承载渐变背景 */}
  <div className='absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100 bg-gradient-to-r from-[#001f54] to-[#002668]'></div>
  
  {/* 原有内容保持不变，添加relative层级确保在伪元素上方 */}
  <Image src={bgImg} alt={alt} className='rounded-xl group-hover:opacity-10 relative z-10' />
  <div className='hidden group-hover:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] relative z-10'>
    <h3 className='text-2xl text-white tracking-wider text-center'>{title}</h3>
    <p className='pb-4 pt-2 text-white text-center'>{tech}</p>
    <div className='flex justify-center gap-6'>
      <div className='rounded-full shadow-lg bg-slate-100 p-4 cursor-pointer transition hover:bg-lite-blue hover:text-slate-100 hover:scale-105 ease-in duration-75'>
        <Link href={githubURL} title='GitHub Repo' target='_blank' rel='noopener noreferrer'>
          <FaGithubSquare size={30} />
        </Link>
      </div>
      <div className='rounded-full shadow-lg bg-slate-100 p-4 cursor-pointer transition hover:bg-lite-blue hover:text-slate-100 hover:scale-105 ease-in duration-[0ms]'>
        <Link href={projectURL} title='Deployed Project' target='_blank' rel='noopener noreferrer'>
          <FaExternalLinkAlt size={30} />
        </Link>
      </div>
    </div>
  </div>
</div>

2. 核心逻辑说明：

• 外层div保持默认白色背景
• 伪元素absolute inset-0占满整个父容器，默认opacity-0完全透明，同时添加transition-opacity实现透明度过渡
• hover时伪元素透明度变为100%，叠加在白色背景上，视觉上呈现从白色到渐变的平滑过渡
• 给原有内容（Image、文本容器）添加relative z-10，确保它们在伪元素上方，不会被渐变背景遮挡

修改后即可实现与图标一致的平滑过渡效果。

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