Home
Michael Andreuzza
animated blog cards with Tailwind CSS

animated blog cards with Tailwind CSS

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid

Card Image gallery

Author Michael Andreuzza

3.5k

Fork Fullscreen

<section class="flex flex-col lg:h-svh justify-center items-center overflow-scroll">
 <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl">
  <div>
   <h1>Animated images on hover</h1>
   <p class="text-balance">Hover over the images to see the animation.</p>
  </div>
 </div>
 <div class="flex flex-wrap mx-auto md:flex-nowrap mt-6 border-t pt-12">
  <div class="relative flex flex-col items-start m-1 transition  ease-in-out duration-500  delay-150 transform  md:w-96 md:-ml-32 md:hover:-translate-x-32 md:hover:-translate-y-8 shrink-0 ">
   <article class="mx-auto   rounded-3xl overflow-hidden  bg-cover ring-2 ring-inset ring-white/50 bg-center min-h-150 relative   transform duration-500   group" style="background-image: url('https://www.yankodesign.com/images/design_news/2019/07/desk-setups-that-maximize-productivity-part-2/Desk-Setup_12.jpg');">
    <div class=" relative h-full  group-hover:bg-opacity-0 min-h-150  flex flex-wrap flex-col pt-[30rem]  transform duration-500">
     <div class=" group-hover:bg-black/30 duration-500 group-hover:backdrop-blur p-8 lg:p-10 h-full justify-end flex flex-col ">
      <p class="opacity-0 text-white text-sm 2xl:text-lg group-hover:opacity-80 transform duration-500 "> Immerse yourself in a seamless experience where every touchpoint anticipates your needs. Description one. </p>
     </div>
    </div>
   </article>
  </div>
  <div class="relative flex flex-col items-start m-1 transition  ease-in-out duration-500  delay-150 transform  md:w-96 md:-ml-32 md:hover:-translate-x-32 md:hover:-translate-y-8 shrink-0 ">
   <article class="mx-auto   rounded-3xl overflow-hidden  bg-cover ring-2 ring-inset ring-white/50 bg-center min-h-150 relative   transform duration-500   group" style="background-image: url('https://i.pinimg.com/564x/34/65/b8/3465b890b11571e2c876ae74dc1b3139.jpg');">
    <div class=" relative h-full  group-hover:bg-opacity-0 min-h-150  flex flex-wrap flex-col pt-[30rem]  transform duration-500">
     <div class=" group-hover:bg-black/30 duration-500 group-hover:backdrop-blur p-8 lg:p-10 h-full justify-end flex flex-col ">
      <p class="opacity-0 text-white text-sm 2xl:text-lg group-hover:opacity-80 transform duration-500 "> Engage with a platform where interaction is intuitive, ensuring your journey is fluid and responsive. Description two. </p>
     </div>
    </div>
   </article>
  </div>
  <div class="relative flex flex-col items-start m-1 transition  ease-in-out duration-500  delay-150 transform  md:w-96 md:-ml-32 md:hover:-translate-x-32 md:hover:-translate-y-8 shrink-0 ">
   <article class="mx-auto   rounded-3xl overflow-hidden  bg-cover ring-2 ring-inset ring-white/50 bg-center min-h-150 relative   transform duration-500   group" style="background-image: url('https://i.pinimg.com/564x/33/d6/54/33d654e8058fdf69e160dcbd2235cdac.jpg');">
    <div class=" relative h-full  group-hover:bg-opacity-0 min-h-150  flex flex-wrap flex-col pt-[30rem]  transform duration-500">
     <div class=" group-hover:bg-black/30 duration-500 group-hover:backdrop-blur p-8 lg:p-10 h-full justify-end flex flex-col ">
      <p class="opacity-0 text-white text-sm 2xl:text-lg group-hover:opacity-80 transform duration-500 "> Discover our commitment to thoughtful design, prioritizing accessibility and user satisfaction. Description three. </p>
     </div>
    </div>
   </article>
  </div>
  <div class="relative flex flex-col items-start m-1 transition  ease-in-out duration-500  delay-150 transform  md:w-96 md:-ml-32 md:hover:-translate-x-32 md:hover:-translate-y-8 shrink-0 ">
   <article class="mx-auto   rounded-3xl overflow-hidden  bg-cover ring-2 ring-inset ring-white/50 bg-center min-h-150 relative   transform duration-500   group" style="background-image: url('https://i.pinimg.com/564x/39/b8/01/39b801afe355e623bcb3928b1c1b046d.jpg');">
    <div class=" relative h-full  group-hover:bg-opacity-0 min-h-150  flex flex-wrap flex-col pt-[30rem]  transform duration-500">
     <div class=" group-hover:bg-black/30 duration-500 group-hover:backdrop-blur p-8 lg:p-10 h-full justify-end flex flex-col ">
      <p class="opacity-0 text-white text-sm 2xl:text-lg group-hover:opacity-80 transform duration-500 "> Experience innovation at every step, with forward-thinking solutions designed to enhance your daily interactions. Description four. </p>
     </div>
    </div>
   </article>
  </div>
  <div class="relative flex flex-col items-start m-1 transition  ease-in-out duration-500  delay-150 transform  md:w-96 md:-ml-32 md:hover:-translate-x-32 md:hover:-translate-y-8 shrink-0 ">
   <article class="mx-auto   rounded-3xl overflow-hidden  bg-cover ring-2 ring-inset ring-white/50 bg-center min-h-150 relative   transform duration-500   group" style="background-image: url('https://i.pinimg.com/564x/2b/b5/48/2bb548dbf4a4c57381a7b7f736b4930b.jpg');">
    <div class=" relative h-full  group-hover:bg-opacity-0 min-h-150  flex flex-wrap flex-col pt-[30rem]  transform duration-500">
     <div class=" group-hover:bg-black/30 duration-500 group-hover:backdrop-blur p-8 lg:p-10 h-full justify-end flex flex-col ">
      <p class="opacity-0 text-white text-sm 2xl:text-lg group-hover:opacity-80 transform duration-500 "> Join us in embracing sustainability, where design and functionality meet eco-conscious decisions. Description five. </p>
     </div>
    </div>
   </article>
  </div>
 </div> 
 <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
  <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
   <div class="flex w-0 flex-1 items-center p-4">
    <div class="w-full">
     <p class="text-sm font-medium text-neutral-900">Tutorial</p>
     <p class="mt-1 text-sm text-neutral-500">
      How to creating animated blog cards with Astrojs and Tailwind CSS

</p>
     <p class="mt-2 text-xs text-orange-600 underline"> <a href="https://lexingtonthemes.com"> by © Lexington Themes</a> </p>
    </div>
   </div>
   <div class="flex">
    <div class="flex flex-col divide-y divide-neutral-200">
     <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-animated-blog-cards-with-astrojs-and-tailwind-css/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a> </div>
     <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/animated-blog-cards/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600">Get the code</a> </div>
    </div>
   </div>
  </div>
 </div> 
</section>

Related Examples

image gallery with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

9 months ago

3k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

9 months ago

7.7k
Image cards

Author:
Reuben Enahoro

2 months ago

648
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

1 month ago

449
Slider
Responsive slider

Author:
Abhiraj

4 weeks ago

265
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

8 months ago

1.4k
Simple product card

Author:
farid

4 months ago

711
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

1.8k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

1 year ago

10.1k
card profie
profile card

Author:
Aman kumar

1 year ago

3.3k
Minimal Info cards

Author:
Gopi Yadav

2 years ago

9.9k
Hover Card

Author:
Maxim

7 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components