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.
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
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.
<span class="group-hover:text-yellow-500 text-black">Hello</span>
<span class="group-hover:text-red-500 text-black">World</span>
Try it out in the following CodePen demo:
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:
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"
class="absolute bg-black w-full h-full rounded-xl bg-opacity-25 opacity-0 group-hover:opacity-100"
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"
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:
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 🎉.