Published on

The 5 Really Obvious Ways To Make A Card With Hover Effect With Tailwind CSS Better That You Ever Did

Tags
Cards
card with hover effect

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. It provides a set of pre-defined CSS classes that you can use to style your HTML elements without having to write any custom CSS. With Tailwind CSS, you can create beautiful and responsive user interfaces quickly and easily.

The description of card with hover effect ui component

A card with hover effect is a popular user interface component that is used to display information in a visually appealing way. It consists of a card that contains some content, such as an image and some text, and when the user hovers over the card, it displays additional information or an animation.

Why use Tailwind CSS to create a card with hover effect ui component?

Tailwind CSS provides a set of pre-defined classes that you can use to create a card with hover effect quickly and easily. You don't need to write any custom CSS, which saves you time and effort. Additionally, Tailwind CSS is highly customizable, so you can easily modify the styles of your card with hover effect to match your design requirements.

The preview of card with hover effect ui component.

To create a card with hover effect using Tailwind CSS, you can use the following classes:

<div class="relative rounded-lg overflow-hidden group">
  <div class="absolute inset-0 bg-gradient-to-t from-gray-800 to-transparent opacity-75 group-hover:opacity-100"></div>
  <div class="absolute inset-0 transform group-hover:translate-y-1 transition duration-500">
    <div class="h-full w-full flex items-center justify-center">
      <a href="#" class="bg-white rounded-lg p-4">
        <h3 class="text-gray-800 font-semibold">Card Title</h3>
        <p class="text-gray-600">Card description goes here.</p>
      </a>
    </div>
  </div>
  <img class="w-full h-64 object-cover" src="https://via.placeholder.com/640x360.png?text=Card+Image" alt="Card Image">
</div>

Free download of the card with hover effect's source code

The source code of card with hover effect ui component.

To create a card with hover effect using Tailwind CSS, you can use the following classes:

<div class="relative rounded-lg overflow-hidden group">
  <div class="absolute inset-0 bg-gradient-to-t from-gray-800 to-transparent opacity-75 group-hover:opacity-100"></div>
  <div class="absolute inset-0 transform group-hover:translate-y-1 transition duration-500">
    <div class="h-full w-full flex items-center justify-center">
      <a href="#" class="bg-white rounded-lg p-4">
        <h3 class="text-gray-800 font-semibold">Card Title</h3>
        <p class="text-gray-600">Card description goes here.</p>
      </a>
    </div>
  </div>
  <img class="w-full h-64 object-cover" src="https://via.placeholder.com/640x360.png?text=Card+Image" alt="Card Image">
</div>

<div class="py-4">
    <div class="shadow-lg group container  rounded-md bg-white  max-w-sm flex justify-center items-center  mx-auto content-div">
        <div>
        <div  class="w-full image-cover rounded-t-md" >
          <div class="p-2 m-4 w-16 h-16 text-center bg-gray-700 rounded-full text-white float-right fd-cl group-hover:opacity-25">
             <span class="text-base tracking-wide  font-bold border-b border-white font-sans"> 12</span>
              <span class="text-xs tracking-wide font-bold uppercase block font-sans">April</span>
          </div>
        </div>
        <div class="py-8 px-4 bg-white  rounded-b-md fd-cl group-hover:opacity-25">
            <span class="block text-lg text-gray-800 font-bold tracking-wide">Book a flight</span>
            <span  class="block text-gray-600 text-sm">Vivamus ac ligula sit amet erat luctus laoreet ac quis ligula. Donec bibendum faucibus purus eget cursus. Proin enim ante, scelerisque vel sem sit amet, ultrices mollis risus. Praesent justo felis, ullamcorper a cursus sed, condimentum at dui. 
            </span>
        </div>
        </div>
        <div class="absolute opacity-0 fd-sh group-hover:opacity-100">
       <span class="text-3xl font-bold text-white tracking-wider leading-relaxed font-sans">Paris city of light</span> 
       <div class="pt-8 text-center">
           <button class="text-center rounded-lg p-4 bg-white  text-gray-700 font-bold text-lg">Learn more</button>
           </div>
    </div>
    </div>
   
</div>
<style>
  .content-div{
  background-image:url('https://images.unsplash.com/photo-1522093007474-d86e9bf7ba6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
}
  .content-div:hover{
    background-image:
    linear-gradient(to right,
     rgba(126, 213, 111, 0.801), hsla(160, 64%, 43%, 0.801) ),
     url('https://images.unsplash.com/photo-1522093007474-d86e9bf7ba6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80');
    }

    .image-cover  {
      height:260px;
    }
  /*
  -remove the classes below if you have the 'group-hover'property added in your tailwind config file
  -also remove the class from the html template
  */
    .content-div:hover .fd-cl{ 
 opacity: 0.25;
    }
    .content-div:hover .fd-sh{ 
 opacity: 1;
    }

  
  </style>

How to create a card with hover effect with Tailwind CSS?

To create a card with hover effect using Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the following code:
<div class="relative rounded-lg overflow-hidden group">
  <div class="absolute inset-0 bg-gradient-to-t from-gray-800 to-transparent opacity-75 group-hover:opacity-100"></div>
  <div class="absolute inset-0 transform group-hover:translate-y-1 transition duration-500">
    <div class="h-full w-full flex items-center justify-center">
      <a href="#" class="bg-white rounded-lg p-4">
        <h3 class="text-gray-800 font-semibold">Card Title</h3>
        <p class="text-gray-600">Card description goes here.</p>
      </a>
    </div>
  </div>
  <img class="w-full h-64 object-cover" src="https://via.placeholder.com/640x360.png?text=Card+Image" alt="Card Image">
</div>

  1. Add the relative and rounded-lg classes to the outer div element. These classes make the card container rounded and position it relative to its parent container.

  2. Add the overflow-hidden class to the outer div element. This class ensures that any content that overflows the container is hidden.

  3. Add the group class to the outer div element. This class is used to apply styles to the container when the user hovers over it.

  4. Add the following code inside the outer div element:

<div class="absolute inset-0 bg-gradient-to-t from-gray-800 to-transparent opacity-75 group-hover:opacity-100"></div>

This code adds a gradient overlay to the card when the user hovers over it. The gradient goes from dark gray at the bottom to transparent at the top. The opacity-75 class sets the opacity of the gradient to 75%, and the group-hover:opacity-100 class sets the opacity to 100% when the user hovers over the card.

  1. Add the following code inside the outer div element, after the gradient overlay:
<div class="absolute inset-0 transform group-hover:translate-y-1 transition duration-500">

This code adds a transform to the card when the user hovers over it. The translate-y-1 class moves the card down by 1 pixel, and the transition class sets the duration of the animation to 500 milliseconds. The group-hover class applies the styles only when the user hovers over the card.

  1. Add the following code inside the transformed div element:
<div class="h-full w-full flex items-center justify-center">
  <a href="#" class="bg-white rounded-lg p-4">
    <h3 class="text-gray-800 font-semibold">Card Title</h3>
    <p class="text-gray-600">Card description goes here.</p>
  </a>
</div>

This code creates a centered container that contains a link with a white background, rounded corners, and some padding. Inside the link, there is a title and a description.

  1. Add the following code after the transformed div element:
<img class="w-full h-64 object-cover" src="https://via.placeholder.com/640x360.png?text=Card+Image" alt="Card Image">

This code adds an image to the card with a width of 100%, a height of 64 pixels, and an object-fit of cover. The src attribute points to a placeholder image, and the alt attribute provides alternative text for the image.

  1. Save the file and open it in your web browser. You should see a card with a gradient overlay and a transform animation when you hover over it.

Conclusion

In this article, we have discussed how to create a card with hover effect using Tailwind CSS. We have seen that Tailwind CSS provides a set of pre-defined classes that you can use to create beautiful and responsive user interfaces quickly and easily. By following the steps outlined in this article, you can create a card with hover effect that will impress your users and enhance their experience on your website.