使用Tailwind CSS实现悬停时图片放大并淡出颜色遮罩

问题根源在于遮罩层是绝对定位元素，完全覆盖在图片上方，导致鼠标悬停时实际触发的是遮罩层的hover事件，图片根本接收不到hover状态，所以放大效果无法生效。

直接修改代码，把hover状态的触发源从单个元素改成父容器即可：

<!-- TileGrid.svelte -->
<script lang="ts">
  import { projects } from "../data/project";
</script>

<div class="grid grid-cols-5 gap-4">
  {#each projects as project}
    <!-- 给父容器添加group类 -->
    <div class="tile relative overflow-hidden group">
      <img
        src={project.image}
        alt={project.title}
        <!-- 将hover:scale-125改为group-hover:scale-125 -->
        class="transition-transform duration-300 transform group-hover:scale-125"
      />
      <!-- Project title overlay -->
      <div
        <!-- 将hover:opacity-0改为group-hover:opacity-0 -->
        class="absolute inset-0 bg-black opacity-75 transition-opacity duration-300 group-hover:opacity-0"
      ></div>
      <div class="absolute bottom-0 left-0 p-4 text-white uppercase">
        <h2 class="text-lg font-semibold">{project.title}</h2>
      </div>
    </div>
  {/each}
</div>

<style lang="postcss">
  /* CSS classes here */
</style>

修改说明：

• 给父容器.tile添加group类，Tailwind的group-*类会监听父容器的hover状态，传递给子元素
• 图片的放大效果改为由父容器hover触发，避免遮罩层遮挡导致的事件捕获问题
• 遮罩层的淡出效果同样绑定到父容器的hover状态，保持原有交互逻辑不变

这样修改后，鼠标悬停在整个tile区域时，图片会正常放大，遮罩层也会同步淡出。

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