card-flip-hover

1"use client"
2 
3import React, { useState } from "react"
4 
5interface CardFlipHoverProps {
6  imageUrl: string
7}
8 
9export const CardFlipHover = ({ imageUrl }: CardFlipHoverProps) => {
10  const [isFlipped, setIsFlipped] = useState(false)
11 
12  const handleHover = () => {
13    if (!isFlipped) {
14      setIsFlipped(true)
15      setTimeout(() => setIsFlipped(false), 700)
16    }
17  }
18 
19  return (
20    <div className="h-60 w-44 [perspective:1000px]" onMouseEnter={handleHover}>
21      <div
22        className={`relative h-full w-full transition-all duration-700 [transform-style:preserve-3d] ${
23          isFlipped
24            ? "[transform:rotateY(180deg)_translateY(-40px)]"
25            : "[transform:rotateY(0deg)_translateY(0px)]"
26        }`}
27      >
28        {/* Front Side */}
29        <div className="absolute h-full w-full overflow-hidden rounded-xl shadow-xl [backface-visibility:hidden]">
30          <img
31            src={imageUrl}
32            alt="Front"
33            className="h-full w-full object-cover"
34          />
35        </div>
36 
37        {/* Back Side */}
38        <div className="absolute flex h-full w-full [transform:rotateY(180deg)] items-center justify-center overflow-hidden rounded-xl bg-cyan-600 text-xl font-bold text-white shadow-xl [backface-visibility:hidden]">
39          <img
40            src={imageUrl}
41            alt="Back"
42            className="h-full w-full object-cover"
43          />
44        </div>
45      </div>
46    </div>
47  )
48}