Search code examples
hovertailwind-csssvelte

Zoom in on image and fade color overlay together on hover using Tailwind CSS

I have an image with a color overlay, and I would like to zoom in on the image while fading out the color overlay on hover. I'm working with Svelte, Tailwind CSS, and TypeScript. Fading the color overlay is working, but the image zoom is not. However, when I remove the color overlay, the zoom works on hover. Here is my current code.

<!-- 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>

Any help is greatly appreciated!

I've been through a lot of documentation and countless videos with no progress. I appreciate any and all input. Thank you!

Solution

  • You could apply pointer-events: none to the color overlay element via the pointer-events-none Tailwind class so that the overlay element does not block hovering on the image. This will mean that the <img> can receive mouse hovering, allowing the hover: classes to activate. Then use peer-hover: to activate the fade out of the color overlay element when the <img> element is hovered:

    <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>

    Though do notice the hover effect is removed when one hovers over the text. This quirk would be present without the color overlay element. This was the situation where you declared that the zoom behavior works so it could be that this is desired behavior for you.

    You could also consider using group-hover:, such that when the tile is hovered, the appropriate CSS is applied:

    <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>

    This would not exhibit the quirk mentioned previously.