Tailwind group hover, the state you missed

— 4 minute read

Hover states are an essential part of web development and can really enhance your UI.

If you worked with Tailwind, you might know the hover states, which are amazing, but they never included sub-selectors.

This is something the group-hover class can help us with!

You can see the result of what we'll be building today in the CodePen below.

See the Pen by Chris Bongers (@rebelchris) on CodePen.

Tailwind group hover effect

Let's first take a look at how this effect works.

It needs to have a group class on the parent element. Then we can add hover classes to children of this group element by using the group-hover: class.

Let's try and make a super simple effect, where we have a div with two spans inside. On hover, each span will get its own color.

<div class="group">
  <span class="group-hover:text-yellow-500 text-black">Hello</span>
  <span class="group-hover:text-red-500 text-black">World</span>
</div>

Try it out in the following CodePen demo:

See the Pen by Chris Bongers (@rebelchris) on CodePen.

Creating a hover-card with Tailwind group hover

Let's look at how we can create the card hover effect like the top demo shows.

This uses the Tailwind square div effect, as seen in the article about Tailwind CSS responsive square divs.

But let's sketch the high-level overview of what we'll be needing:

  • Div element [Parent]
    • Child element [Background black layer]
    • Child element [Title element]

These two child elements are only visible once we hover over the parent div.

In the basic structure, it will look like this:

<div
  class="relative group flex justify-center w-1/2 h-0 bg-center bg-cover border-2 border-gray-300 shadow-lg pb-1-2 rounded-xl bg-image"
>
  <div
    class="absolute bg-black w-full h-full rounded-xl bg-opacity-25 opacity-0 group-hover:opacity-100"
  ></div>

  <div
    class="absolute p-6 text-2xl tracking-widest text-white uppercase -translate-y-1/2 bg-black bg-opacity-75 opacity-0 top-1/2 rounded-xl group-hover:opacity-100"
  >
    Tadaa 🎉
  </div>
</div>

This will give us the desired effect and style of the elements to line up nicely.

However, at this point, we get a pretty static flicker effect. Let's change that by adding the following two classes to our child elements: transform transition-opacity.

These will make sure we animate the opacity transition.

You might have spotted that the black background div is an absolute positioned element, using the full width and height. We use a center hack for the text layer since it's not the full size of the div. This hack means we place the element 50% from the top and then offset the y-axis by -50%, ensuring the element is perfectly centered.

I hope you learned something new, as this group-hover is just a fantastic addition to Tailwind 🎉.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter