Creating a clipping mask hover effect with Tailwind CSS

You might have noticed how on this site I use certain hover effects where an element previously invisible presents itself and its contents are in a different color. It sort of swipes in. You can see it on blocks linking to a certain project or journal entry or when invoking the mobile navigation. In this post I'm going to show you how you can achieve this with Tailwind CSS.

The effect itself is a little hard to put in words, but check out this next example and I'm sure you know what I mean. I've slowed this animation down a bit to make it a little more clear what's actually happening.

You can also check out the effect with some more details on the homepage for example. Scroll down to projects or journal and see what happens when you hover those blocks.

How does this work

This effect works by using two stacked layers. The inverted layer with the tinted background is on top but completely clipped using a CSS clip-path. As soon as we hover we transition that clipping path so that it's completely visible. The CSS involved looks like this.

In the default state we have a circle with a diameter of 20% positioned on 120% on the x-axis and 120% on the y-axis. This means we can't see anything of the clipped content. When we hover however the circle increases in size to 170% and that'll make the clipped content visible. A great way to learn about this syntax is by playing with Clippy by Bennet Feely.

Tailwind CSS and arbitrary properties

Now let's convert these properties to Tailwind CSS using arbitrary properties for the clipping paths.

Having this magic up our sleeves, all we need to do now is combine it with the actual markup. Let's start with the basic shape of the button.

If we position this button relatively we can use an absolutely positioned div inside it with the color inverted button markup.

By adding a transition utility and the arbitrary clipping mask properties we can make sure the color inverted button duplicate is masked by default and will reveal itself when the parent (group) is hovered. I use the motion-safe modifier on all my transitions to make sure the effect is only visible when users don't explicitly toggled on reduce motion in their operating system settings.

Let's finish it off by adding some attributes to improve accessibility.

As you can see we've added draggable, aria-labeledby and aria-hidden attributes. The first one instructs the browser that this thing is not draggable. The second one makes sure that screen readers have a title to pronounce and the third one instructs screen readers ignore this duplicate content.

Did you enjoy this article or do you have any questions? Let me know.