In the world of web design, creating engaging and interactive user experiences is essential. One way to achieve this is through hover effects that add depth and interactivity to your elements. In this blog post, we will walk through how to create a stylish hover effect using Tailwind CSS, inspired by the elegant designs found on the Motion.dev website.

Overview of the Effect

The effect we will create involves an image that scales down and becomes semi-transparent when hovered over, while a text overlay smoothly transitions into view. This creates a visually appealing interaction that draws attention to the text while subtly diminishing the image.

I / Setting Up Your Project

Before we start coding, ensure you have a React project set up with Tailwind CSS. If you haven't set up Tailwind CSS yet, you can follow the official Tailwind CSS installation guide.

II / HTML structure

Here's the HTML structure we will use for our component:

<div class="flex h-svh w-full items-center justify-center bg-zinc-900">
  <div class="group relative flex w-full max-w-sm items-center justify-center rounded-2xl border border-zinc-700 bg-zinc-800 p-8">
    <img class="size-36 scale-100 opacity-100 blur-0 transition-all duration-700 ease-out group-hover:scale-75 group-hover:opacity-20 group-hover:blur-md" src="https://boost.space/wp-content/uploads/2022/06/figma.png" alt="" />
    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 scale-150 font-mono text-2xl font-black text-zinc-200 opacity-0 transition-all duration-700 ease-out group-hover:scale-100 group-hover:opacity-100">Figma <span class="text-orange-700">Inc</span>.</div>
  </div>
</div>
          

III / Explanation of the Code

• Flexbox Layout:
  • flex items-center justify-center: Centers the content both vertically and horizontally.
• Background:
  • bg-zinc-900: Sets a dark background color.

Image:

• Initial State:
  • scale-100 opacity-100: Sets the initial scale and opacity to 100%.
  • transition-all duration-700 ease-out: Applies a smooth transition effect.
• Hover State:
  • group-hover:scale-75 group-hover:opacity-20 group-hover:blur-md: Scales down the image, reduces opacity, and applies a blur effect on hover.

Text Overlay:

• Initial State:
  • scale-150 opacity-0: Initially scales the text up and hides it.
• Hover State:
  • group-hover:scale-100 group-hover:opacity-100: Scales the text down to its original size and makes it visible on hover.

Key Points:

• Flexbox: A powerful layout system used to align and distribute elements.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Hover Effects: The group-hover class is used to apply styles to child elements when the parent is hovered.
• Transition Effects: The transition-all class is used to create smooth animations.

IV / Styling with Tailwind CSS

The use of Tailwind CSS allows for rapid styling without writing custom CSS. The utility classes provide a clean and efficient way to manage styles directly in your HTML.

V / Inspiration from Motion Dev

The design inspiration for this effect comes from the elegant and interactive elements found on the Motion.dev website. The site showcases how subtle animations and hover effects can enhance user engagement and create a more dynamic experience. By implementing similar techniques, we can create visually appealing components that capture users attention.

Conclusion

In this tutorial, we created a stylish hover effect using Tailwind CSS that features an image and a text overlay. This effect not only enhances the visual appeal of your website but also improves user interaction. By drawing inspiration from Motion.dev, we can see how effective design can elevate the user experience.