Kotak Imej Kepala Dinamik Menggunakan React Tailwind CSS

Perlukan rangsangan UI yang cepat? ? Berikut ialah coretan CSS React Tailwind yang mudah untuk mencipta Kotak Imej Head-Out yang bergaya.

Kod

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

Menggunakan kelas kumpulan dan pengubah suai, kami boleh mencapai kesan hebat seperti di atas. Salin, tampal, selesai! ?️✨ Anda juga boleh melaraskan anjakan dan menyesuaikannya dengan cara yang anda suka!

Atas ialah kandungan terperinci Kotak Imej Kepala Dinamik Menggunakan React Tailwind CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!