Image Cards

Simple, elegant, interactive and responsive image cards with hover effects and animation.

Built with Tailwind CSS.

Check out the example below:

See the code below:

tsx
import * as React from 'react';

export function ImageCards() {
  const [activeId, setActiveId] = React.useState(0);

  return (
    <div className="flex flex-col gap-4 md:flex-row flex-wrap">
      <div
        onClick={() => setActiveId(0)}
        className={`w-full cursor-pointer h-24 border-1 rounded-md transition-all ease-in-out duration-500 md:h-96 md:w-24 ${
          activeId === 0
            ? 'h-96 md:w-96'
            : 'hover:scale-105 hover:shadow-2xl hover:grayscale-0 grayscale'
        }`}
      >
        <div className="h-full w-full rounded-sm bg-[url(https://picsum.photos/1000?random=1)] bg-no-repeat bg-cover bg-center"></div>
      </div>
      <div
        onClick={() => setActiveId(1)}
        className={`w-full cursor-pointer h-24 border-1 rounded-md transition-all ease-in-out duration-500 md:h-96 md:w-24 ${
          activeId === 1
            ? 'h-96 md:w-96'
            : 'hover:scale-105 hover:shadow-2xl hover:grayscale-0 grayscale'
        }`}
      >
        <div className="h-full w-full rounded-sm bg-[url(https://picsum.photos/1000?random=2)] bg-no-repeat bg-cover bg-center"></div>
      </div>
      <div
        onClick={() => setActiveId(2)}
        className={`w-full cursor-pointer h-24 border-1 rounded-md transition-all ease-in-out duration-500 md:h-96 md:w-24 ${
          activeId === 2
            ? 'h-96 md:w-96'
            : 'hover:scale-105 hover:shadow-2xl hover:grayscale-0 grayscale'
        }`}
      >
        <div className="h-full w-full rounded-sm bg-[url(https://picsum.photos/1000?random=3)] bg-no-repeat bg-cover bg-center"></div>
      </div>
      <div
        onClick={() => setActiveId(3)}
        className={`w-full cursor-pointer h-24 border-1 rounded-md transition-all ease-in-out duration-500 md:h-96 md:w-24 ${
          activeId === 3
            ? 'h-96 md:w-96'
            : 'hover:scale-105 hover:shadow-2xl hover:grayscale-0 grayscale'
        }`}
      >
        <div className="h-full w-full rounded-sm bg-[url(https://picsum.photos/1000?random=4)] bg-no-repeat bg-cover bg-center"></div>
      </div>
    </div>
  );
}