"use client"; import React from "react"; import { motion } from "framer-motion"; import { ShoppingCart } from "lucide-react"; export default function HoverCard () { return ( <div className="relative overflow-hidden rounded-lg shadow-lg w-1/2"> <motion.img src="https://images.pexels.com/photos/17944592/pexels-photo-17944592/free-photo-of-black-royal-enfield-hunter-350.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Hunter 350" className="object-cover w-full h-full" whileHover={{ scale: 1.1 }} /> <motion.div initial={{ opacity: 0 }} whileHover={{ opacity: 1 }} className="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-end text-white p-4" > <motion.button initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }} className="absolute top-4 right-4 bg-white text-black px-4 py-2 rounded-full flex items-center shadow-lg text-sm" > <ShoppingCart className="mr-2" size={15} /> Buy Now </motion.button> <h2 className="text-2xl font-bold mb-2">Hunter 350</h2> <p className="text-sm mb-4 text-foreground"> Iconic British off-road vehicle from 1982. A legend in the world of adventure. </p> </motion.div> </div> ); };

Installation

Hunter 350