使用 React Tailwind CSS 的動態頭部圖片框

需要快速提升 UI 效果嗎？ ？這是一個簡單的 React Tailwind CSS 片段，用於創建時尚的 Head-Out 圖片框。

程式碼

// 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中文網其他相關文章！