DEV Community

Cover image for Dynamic Head-Out Image Box Using React + Tailwind CSS
Hayyan Hami
Hayyan Hami

Posted on • Originally published at hayyaun.ir

1

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.

Hayyaun Head-out

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay