Creative Hover Card
Creative Hover Card is a React and Tailwind CSS card component from UI Layouts, licensed MIT. Copy it and paste it into your project.
UI Layouts
MIT
cards
What it is
Creative Hover Card is a React and Tailwind CSS card component from UI Layouts, licensed MIT. Copy it and paste it into your project.
How to use it
Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.
Five free copies a month. No card.
Needs
npm i motion
Licence
This component comes from UI Layouts and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.
Creative Hover Card
// https://cruip-tutorials.vercel.app/cards-hover-effect/
import Image from 'next/image';
import React from 'react';
function CreativeHoverCard() {
return (
<>
<section className='grid md:grid-cols-3 gap-6 max-md:max-w-xs mx-auto '>
<div className="group bg-linear-to-t from-[#242424] to-[#020202] hover:from-[#182135] hover:to-[#080808] relative before:absolute before:inset-0 before:bg-[url('/noise.gif')] before:opacity-5 rounded-2xl border ">
<div className='relative'>
<div className='px-6 py-5'>
<div className='group-hover:bg-blue-400 bg-white transition-all duration-500 ease-in-out w-fit px-3 rounded-full text-sm py-1 text-black group-hover:text-white mb-1'>
stastic
</div>
<span className='text-lg group-hover:hidden inline-block font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>
Subscriber Reports
</span>
<span className='text-lg group-hover:inline-block hidden font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>
Subscriber Highlights
</span>
<p className='text-sm text-slate-500'>
Building truly great products is both art and science. It's part intuition and part
data.
</p>
</div>
<div className='relative group-hover:-translate-y-2 transition-transform duration-500 ease-in-out '>
<Image
className='group-hover:opacity-0 transition-opacity duration-500 object-cover h-full m-0 p-0'
src='/simplechartt.webp'
width={350}
height={240}
alt='Card image 01'
/>
<Image
className='absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity object-cover duration-300 h-full m-0 p-0'
src='/chartt.webp'
width={350}
height={240}
alt='Card image 01 displaying on hover'
aria-hidden='true'
/>
</div>
</div>
</div>
<div className="group bg-linear-to-t from-[#050a0a] to-[#051818] hover:from-[#05070a] hover:to-[#0b1a3b] relative before:absolute before:inset-0 before:bg-[url('/noise.gif')] before:opacity-5 rounded-2xl border ">
<div className='relative'>
<div className='px-6 py-5'>
<div className='bg-green-400 group-hover:bg-blue-600 transition-all duration-500 ease-in-out w-fit px-3 rounded-full text-sm py-1 text-white mb-1'>
Password
</div>
<span className='text-lg group-hover:hidden inline-block font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>
Don't Show Your Password
</span>
<span className='text-lg group-hover:inline-block hidden font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>
Hide Your Password
</span>
<p className='text-sm text-slate-500'>
If you don't hide your password then we can see it and know it and then can enter
your account
</p>
</div>
<div className='relative group-hover:-translate-y-2 transition-transform duration-500 ease-in-out'>
<Image
className='group-hover:opacity-0 transition-opacity duration-500'
src='/fullverificationtwo_fpi9eo.webp'
width={350}
height={240}
alt='Card image 01'
/>
<Image
className='absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300'
src='/verification_iwnfmj.webp'
width={350}
height={240}
alt='Card image 01 displaying on hover'
aria-hidden='true'
/>
</div>
</div>
</div>
<div className="group bg-linear-to-t from-[#171c35] to-[#000000] hover:from-[#2b131e] hover:to-[#141414] relative before:absolute before:inset-0 bbefore:bg-[url('/noise.gif')] before:opacity-5 rounded-2xl border ">
<div className='relative'>
<div className='px-6 py-5'>
<div className='bg-blue-400 group-hover:bg-red-500 transition-all duration-500 ease-in-out w-fit px-3 rounded-full text-sm py-1 text-white mb-1'>
Alert
</div>
<span className='text-lg group-hover:hidden inline-block font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>
Chatting Seemlessly
</span>
<span className='text-lg group-hover:inline-block hidden font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>
Don't Hide Chat
</span>
<p className='text-sm text-slate-500'>
Building truly great products is both art and science. It's part intuition and part
data.
</p>
</div>
<div className='relative group-hover:-translate-y-2 transition-transform duration-500 ease-in-out'>
<Image
className='group-hover:opacity-0 transition-opacity duration-500'
src='/chat_zinhdw.webp'
width={350}
height={240}
alt='Card image 01'
/>
<Image
className='absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300'
src='/hide_chat_egk7h4.webp'
width={350}
height={240}
alt='Card image 01 displaying on hover'
aria-hidden='true'
/>
</div>
</div>
</div>
</section>
</>
);
}
export default CreativeHoverCard;