使用 Tailwind CSS 放大图像并在悬停时淡入淡出颜色叠加

Question

我有一个带有颜色叠加的图像，我想放大图像，同时在悬停时淡出颜色叠加。我正在使用 Svelte、Tailwind CSS 和 TypeScript。淡入淡出颜色叠加可以正常工作，但图像缩放却不能。但是，当我删除颜色叠加时，缩放会在悬停时起作用。这是我当前的代码。

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

<div class="grid grid-cols-5 gap-4">
  <!-- Project tiles go here -->
  {#each projects as project}
    <div class="tile relative overflow-hidden">
      <img
        src={project.image}
        alt={project.title}
        class="transition-transform duration-300 transform hover:scale-125"
      />
      <!-- Project title overlay -->
      <div
        class="absolute inset-0 bg-black opacity-75 transition-opacity duration-300 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>

非常感谢任何帮助！

我已经浏览了大量文档和无数视频，但没有任何进展。我感谢所有的意见。谢谢！

Answer 1

您可以通过

pointer-events: none

Tailwind 类将

pointer-events-none

应用于颜色叠加元素，以便叠加元素不会阻止悬停在图像上。这意味着

<img>

可以接收鼠标悬停，从而允许激活

hover:

类。然后使用

peer-hover:

在

<img>

元素悬停时激活颜色叠加元素的淡出：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="grid grid-cols-5 gap-4">
  <div class="tile relative overflow-hidden">
    <img
      src="https://picsum.photos/300/200"
      class="transition-transform duration-300 transform hover:scale-125 peer"
    />
    <div class="absolute inset-0 bg-black opacity-75 transition-opacity duration-300 peer-hover:opacity-0 pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 p-4 text-white uppercase">
      <h2 class="text-lg font-semibold">Foo</h2>
    </div>
  </div>
</div>

您还可以考虑使用

group-hover:

，这样当图块悬停时，就会应用适当的 CSS：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="grid grid-cols-5 gap-4">
  <div class="tile relative overflow-hidden group">
    <img
      src="https://picsum.photos/300/200"
      class="transition-transform duration-300 transform group-hover:scale-125"
    />
    <div 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">Foo</h2>
    </div>
  </div>
</div>