Boîte d'image dynamique Head-Out utilisant React Tailwind CSS

Besoin d'un boost rapide de l'interface utilisateur ? ? Voici un simple extrait CSS de React Tailwind pour créer une élégante boîte d'images 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>
  );
}

En utilisant la classe de groupe et le modificateur, nous pouvons obtenir des effets sympas comme ci-dessus. Copiez, collez, c'est fait ! ?️✨ Vous pouvez également ajuster le déplacement et le personnaliser comme vous le souhaitez !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!