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

4.3k

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

1 year ago

3.5k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

9.6k
Image cards

Author:
Reuben Enahoro

5 months ago

1.1k
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

4 months ago

1.1k
card profie
profile card

Author:
Aman kumar

1 year ago

3.6k
Author box

Author:
Mr Robot

2 years ago

11.3k
Active Beauty Main Page

Author:
Maxim

1 month ago

225
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

10 months ago

1.8k
Responsive Features Section

Author:
ᴀʀ!ᴀ

1 month ago

172
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

2 months ago

323
Card grid for posts

Author:
Mr Robot

2 years ago

20.5k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components