Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS

nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

This tailwind example is contributed by Abdul Baset Bappy, on 26-Mar-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Transitions,Article Card, Blog page card, Article card

Card Other Animation Blog Card

Author Abdul Baset Bappy

Tailwind v3.4 2.3k 4

Fork Fullscreen

<div class="relative p-4 sm:p-6 lg:p-8">
    <p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>

<p class="text-xl font-bold text-white sm:text-2xl">Abdul Baset</p>

<div class="mt-32 sm:mt-48 lg:mt-64">
      <div
        class="translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
      >
        <p class="text-sm text-white">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic asperiores
          quibusdam quidem voluptates doloremque reiciendis nostrum harum. Repudiandae?
        </p>
      </div>
    </div>
  </div>
</a>
  <a href="#" class="group relative block bg-black rounded-lg overflow-hidden">
  <img
    alt=""
    src="https://images.pexels.com/photos/14653174/pexels-photo-14653174.jpeg"
    class="absolute inset-0 h-full w-full rounded-lg object-cover opacity-75 transition-opacity group-hover:opacity-50"
  />

<div class="relative p-4 sm:p-6 lg:p-8">
    <p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>

<p class="text-xl font-bold text-white sm:text-2xl">Tony Wayne</p>

<div class="mt-32 sm:mt-48 lg:mt-64">
      <div
        class="translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
      >
        <p class="text-sm text-white">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic asperiores
          quibusdam quidem voluptates doloremque reiciendis nostrum harum. Repudiandae?
        </p>
      </div>
    </div>
  </div>
</a>
  <a href="#" class="group relative block bg-black rounded-lg overflow-hidden">
  <img
    alt=""
    src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
    class="absolute inset-0 h-full w-full rounded-lg object-cover opacity-75 transition-opacity group-hover:opacity-50"
  />

<div class="relative p-4 sm:p-6 lg:p-8">
    <p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>

<p class="text-xl font-bold text-white sm:text-2xl">Billu Mao</p>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Article Section

Prashant

4 years ago

17.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Card with image
Blog post card

Mr Robot

3 years ago

11.1k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
background animation
background animation

Anonymous

3 years ago

53k
cards
cards with background animation

Anonymous

3 years ago

11.9k