hover grid card

hover over card to change images and contents.

This tailwind example is contributed by Olajide Olamide (Laemmy), on 28-Apr-2026. Component is made with Tailwind v3.4. It is responsive.

Card Hover Other Grid

Author Olajide Olamide (Laemmy)

Tailwind v3.4 495 5

Fork Fullscreen

<div
      class="absolute inset-0 bg-cover bg-center transition-opacity duration-700 ease-in-out"
      :style="`background-image: url('https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=1400'); opacity: ${activeIndex === 0 ? 1 : 0}`"
    >
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80"></div>
    </div>

<div
      class="absolute inset-0 bg-cover bg-center transition-opacity duration-700 ease-in-out"
      :style="`background-image: url('https://images.unsplash.com/photo-1553413077-190dd305871c?w=1400'); opacity: ${activeIndex === 1 ? 1 : 0}`"
    >
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80"></div>
    </div>

<div
      class="absolute inset-0 bg-cover bg-center transition-opacity duration-700 ease-in-out"
      :style="`background-image: url('https://images.unsplash.com/photo-1494412651409-8963ce7935a7?w=1400'); opacity: ${activeIndex === 2 ? 1 : 0}`"
    >
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80"></div>
    </div>

<div
      class="absolute inset-0 bg-cover bg-center transition-opacity duration-700 ease-in-out"
      :style="`background-image: url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=1400'); opacity: ${activeIndex === 3 ? 1 : 0}`"
    >
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80"></div>
    </div>

<div class="absolute inset-0 grid grid-cols-1 md:grid-cols-4">

<div
        class="relative flex flex-col justify-end p-6 border-b md:border-b-0 md:border-r border-white/30 cursor-pointer"
        @mouseenter="activeIndex = 0"
      >
        <span class="category-badge">Logistics</span>
        <h3 class="text-white font-bold leading-tight text-2xl md:text-3xl mb-2.5 w-[300px]">
          Reliable Delivery Every Time
        </h3>
        <p
          class="text-white/80 leading-relaxed text-base md:text-lg font-medium transition-all duration-700 ease-in-out"
          :class="activeIndex === 0 ? 'opacity-100 animate-fadeIn' : 'opacity-0'"
          x-text="activeIndex === 0 ? 'Ensuring your shipments reach destination safely and on schedule..' : ''"
        ></p>
      </div>

<div
        class="relative flex flex-col justify-end p-6 border-b md:border-b-0 md:border-r border-white/30 cursor-pointer"
        @mouseenter="activeIndex = 1"
      >
        <span class="category-badge">Warehousing</span>
        <h3 class="text-white font-bold leading-tight text-2xl md:text-3xl mb-2.5 w-[300px]">
         Global Network Coverage
        </h3>
        <p
          class="text-white/80 leading-relaxed text-base md:text-lg font-medium transition-all duration-700 ease-in-out"
          :class="activeIndex === 1 ? 'opacity-100 animate-fadeIn' : 'opacity-0'"
          x-text="activeIndex === 1 ? 'Ensuring your shipments reach destination safely and on schedule.' : ''"
        ></p>
      </div>

<div
        class="relative flex flex-col justify-end p-6 border-b md:border-b-0 md:border-r border-white/30 cursor-pointer"
        @mouseenter="activeIndex = 2"
      >
        <span class="category-badge">Competitive Pricing Plans</span>
        <h3 class="text-white font-bold leading-tight text-2xl md:text-3xl mb-2.5 w-[300px]">
         Competitive Pricing Plans
        </h3>
        <p
          class="text-white/80 leading-relaxed text-base md:text-lg font-medium transition-all duration-700 ease-in-out"
          :class="activeIndex === 2 ? 'opacity-100 animate-fadeIn' : 'opacity-0'"
          x-text="activeIndex === 2 ? 'Ensuring your shipments reach destination safely and on schedule.' : ''"
        ></p>
      </div>

<div
        class="relative flex flex-col justify-end p-6 cursor-pointer"
        @mouseenter="activeIndex = 3"
      >
        <span class="category-badge">Customs</span>
        <h3 class="text-white font-bold leading-tight text-2xl md:text-3xl mb-2.5 w-[300px]">
          24/7 Customer Support
        </h3>
        <p
          class="text-white/80 leading-relaxed text-base md:text-lg font-medium transition-all duration-700 ease-in-out"
          :class="activeIndex === 3 ? 'opacity-100 animate-fadeIn' : 'opacity-0'"
          x-text="activeIndex === 3 ? 'Ensuring your shipments reach destination safely and on schedule.' : ''"
        ></p>
      </div>

</div>
  </div>
</section>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.9k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Responsive Article Section

Prashant

4 years ago

17.3k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Info cards
Show various statistics on your website

Arya

4 years ago

12.1k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features grid

Sophia Baker

3 years ago

10.9k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.5k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.7k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.3k