Tailwind CSS: Create Image Hover Overlay Effects

Last updated on June 28, 2022 Pennywise Loading... 2 comments

This succinct and straightforward article shows you how to create image hover overlay effects with Tailwind CSS.

Full Example

The GIF below depicts what we’re going to make. When we hover over the image, a curtain with a button inside will animate down. The opacity of the overlay increase from zero to non-transparent, too.

The code:

<body class="p-10">
    <div class="group relative w-96">
        <img class="w-full object-cover"
            src="https://www.kindacode.com/wp-content/uploads/2022/06/t-shirt-example.png" />
        <div
            class="absolute top-0 left-0 w-full h-0 flex flex-col justify-center items-center bg-indigo-700 opacity-0 group-hover:h-full group-hover:opacity-100 duration-500">
            <h1 class="text-2xl text-white">Fiction T-Shirt Store</h1>
            <a class="mt-5 px-8 py-3 rounded-full bg-amber-400 hover:bg-amber-600 duration-300" href="#">Continue Shopping</a>
        </div>
    </div>
</body>

Explanation

In the beginning, the opacity of the overlay is zero (with the opacity-0 utility) and its height is zero, too (with the h-0 utility).

When the parent div is hovering, the opacity of the overlay changes to 100% (opacity-100), and its height increase to 100% of its parent’s height (w-full).

The point is we use the group class and the group-* modifier to style the overlay based on the parent div state:

<div class="group">
  <img src="" />
  <div class="opacity-0 h-0 group-hover:opacity-100 group-hover:h-full">
     This Is The Overlay
  </div>
</div>

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

2 Comments

Inline Feedbacks

View all comments

Amarachi

2 months ago

heyy thank you so much for this, I actually wanted to ask, it works for me for other colors asides black and grey, do you know why ?

i want to use a black overlay

john dilinger

3 months ago

hi and thank you . it’s very usefull to me.
i use display block and display hidden rather than opacity.

Tailwind CSS: Create Image Hover Overlay Effects

You May Also Like