The animation only works on devices that support hover(hoverOnlyWhenSupported).
Here is a preview of the component:
<div className="relative w-full h-full p-1 overflow-hidden border rounded-2xl group">
<div
className="relative overflow-hidden h-80 md:h-[25rem] rounded-xl bg-gradient-to-r from-rose-100 via-emerald-600 to-emerald-500"
>
<div className="relative p-5 mx-auto overflow-hidden rounded-lg mt-7 w-72 md:w-80 h-96">
<img
src="/static/thumbnail-shopcart.jpg"
alt="Shopcart Project Demo"
className="object-cover object-top bg-gray-100 rounded-t-2xl"
loading="lazy"
/>
</div>
<div className="h-full group">
<div className="absolute inset-0 transition-transform duration-200 transform translate-y-full bg-black/50 group-hover:translate-y-0"></div>
<div className="absolute inset-0 flex flex-col items-center justify-center transition-opacity opacity-0 duration-250 group-hover:opacity-100">
<h3 className="ml-1 text-lg font-bold text-white">
Shopcart Website
</h3>
<p className="text-white">September 2023</p>
</div>
</div>
</div>
<Link href="" className="absolute inset-0"></Link>
</div>