Dynamic Head-Out Image Box Using React + Tailwind CSS

Need a quick UI boost? 🚀 Here’s a simple React + Tailwind CSS snippet to create a stylish Head-Out Image Box.

Code

// HeadOutImage.tsx
interface IProps {
  alt: string;
  src: string;
}

export default function HeadOutImage({ alt, src }: IProps) {
  return (
    <div className="group aspect-[7/9] h-auto w-full flex-[0_0_auto] self-start overflow-hidden border-b-2 border-white pt-20">
      <div className="size-full border-2 border-b-0 border-white bg-red-400/0 transition-colors duration-500 group-hover:bg-red-400/85" />
      <Image
        alt={alt}
        src={src}
        className="absolute -bottom-24 h-auto w-full border-2 border-transparent transition-all duration-500 ease-in-out group-hover:-bottom-20"
      />
    </div>
  );
}

Using group class and modifier, we can achieve cool effects as above. Copy, paste, done! 🖼️✨ You can also adjust displacement and customize it in a way you like!