Dynamische Head-Out-Bildbox mit React Tailwind CSS

Brauchen Sie einen schnellen UI-Boost? ? Hier ist ein einfaches React Tailwind-CSS-Snippet zum Erstellen einer stilvollen Head-Out-Bildbox.

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

Mithilfe der Gruppenklasse und des Modifikators können wir wie oben beschrieben coole Effekte erzielen. Kopieren, einfügen, fertig! ?️✨ Sie können die Verschiebung auch anpassen und nach Ihren Wünschen anpassen!

Das obige ist der detaillierte Inhalt vonDynamische Head-Out-Bildbox mit React Tailwind CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!