Published on

How To Build A Animated Card Slide Up Effect With Tailwind CSS In 5 Easy Steps

Tags
Cards
Animated Card Slide Up Effect

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly build custom user interfaces. It provides a set of pre-defined CSS classes that can be used to style HTML elements. With Tailwind CSS, developers can easily create responsive and modern designs without writing any custom CSS.

The description of Animated Card Slide Up Effect ui component

The Animated Card Slide Up Effect is a popular user interface component that can be used to highlight important information on a website. When a user hovers over a card, it slides up to reveal more information. This effect is visually appealing and can help to draw attention to important content.

Why use Tailwind CSS to create a Animated Card Slide Up Effect ui component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create the Animated Card Slide Up Effect quickly and easily. This eliminates the need to write custom CSS, which can save developers a lot of time and effort. Additionally, Tailwind CSS is highly customizable, so developers can easily modify the styles to fit their specific needs.

The preview of Animated Card Slide Up Effect ui component.

To create the Animated Card Slide Up Effect, we will be using Tailwind CSS. Here is a preview of what the effect will look like:

Free download of the Animated Card Slide Up Effect's source code

The source code of Animated Card Slide Up Effect ui component.

To create the Animated Card Slide Up Effect, we will be using HTML and Tailwind CSS. Here is the source code:

<!-- 
  You must enable group-hover in `tailwind.config.js` for the following prop 
  ...
  variants: {
    extend: {
      ...,
      inset: ["group-hover"],
    }
  }
-->
<div class="group relative m-auto mt-36 h-96 w-96 overflow-hidden bg-black">
  <img
    class="h-full w-full transform object-cover backdrop-opacity-100 duration-700"
    src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1650&q=80"
  />
  <div
    class="absolute inset-y-full h-full w-full transform opacity-20 shadow-2xl duration-500 group-hover:-inset-y-0"
  ></div>
  <div
    class="absolute inset-y-3/4 h-full w-full transform bg-gradient-to-t from-black duration-500 group-hover:-inset-y-0"
  >
    <div class="absolute flex w-full place-content-center">
      <p class="mt-10 text-center font-serif text-3xl font-bold capitalize text-white shadow-2xl">
        Team work
      </p>
    </div>
    <div class="absolute mt-20 flex w-full place-content-center">
      <p class="mt-5 w-4/5 text-center font-sans text-white">
        Collaborative effort of a group to achieve a common goal the most effective and efficient
        way!
      </p>
    </div>
    <button class="absolute left-1/4 bottom-4 h-10 w-48 rounded-lg bg-white font-bold text-black">
      Contact Us
    </button>
  </div>
</div>

How to create a Animated Card Slide Up Effect with Tailwind CSS?

Now that we have a basic understanding of what the Animated Card Slide Up Effect is and why we should use Tailwind CSS to create it, let's dive into the steps to create this effect.

Step 1: Set up the HTML structure

The first step is to set up the HTML structure for the card. We will be using a div element to create the card, and a span element to create the slide-up content. Here is the HTML code:

<div class="card">
  <img src="https://via.placeholder.com/150" alt="Placeholder image" class="card-image">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p class="card-description">Card description goes here.</p>
    <span class="card-slide-up-content">
      Slide up content goes here.
    </span>
  </div>
</div>

Step 2: Style the card using Tailwind CSS

Next, we will style the card using Tailwind CSS. We will use the flex and flex-col classes to create a flexbox layout, and the shadow-lg class to add a drop shadow to the card. Here is the CSS code:

.card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

Step 3: Style the card image

We will use the object-cover and h-48 classes to set the height of the card image and ensure that it covers the entire container. Here is the CSS code:

.card-image {
  object-cover: cover;
  height: 12rem;
}

Step 4: Style the card content

We will use the p-4 class to add padding to the card content, and the text-gray-700 class to set the text color. Here is the CSS code:

.card-content {
  padding: 1rem;
  color: #4a5568;
}

Step 5: Add the slide-up effect

Finally, we will add the slide-up effect using Tailwind CSS. We will use the transition and transform properties to animate the slide-up effect. Here is the CSS code:

.card:hover .card-slide-up-content {
  transform: translateY(-100%);
}

.card-slide-up-content {
  transition: transform 0.3s ease;
}

Conclusion

In this article, we have learned how to create an Animated Card Slide Up Effect using Tailwind CSS. By following the five easy steps outlined in this article, you can create this effect quickly and easily. Tailwind CSS is a powerful tool that can help developers create modern and responsive user interfaces without writing any custom CSS.