React Tailwind CSS を使用した動的ヘッドアウト画像ボックス

UI を簡単に改善する必要がありますか? ?これは、スタイリッシュなヘッドアウト画像ボックスを作成するためのシンプルな React Tailwind CSS スニペットです。

コード

// 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>
  );
}

グループ クラスとモディファイアを使用すると、上記のような素晴らしい効果を実現できます。コピーして貼り付けて完了です。 ⁉️✨ 排気量を調整して自分好みにカスタマイズすることも可能です!

以上がReact Tailwind CSS を使用した動的ヘッドアウト画像ボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。