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 중국어 웹사이트의 기타 관련 기사를 참조하세요!