Card by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="relative group cursor-pointer overflow-hidden duration-500 w-64 h-80 bg-zinc-800 text-gray-50 p-5" 3> 4 <div class=""> 5 <div 6 class="group-hover:scale-110 w-full h-60 bg-blue-400 duration-500" 7 ></div> 8 <div 9 class="absolute w-56 left-0 p-5 -bottom-16 duration-500 group-hover:-translate-y-12" 10 > 11 <div 12 class="absolute -z-10 left-0 w-64 h-28 opacity-0 duration-500 group-hover:opacity-50 group-hover:bg-blue-900" 13 ></div> 14 <span class="text-xl font-bold">Hover me!</span> 15 <p class="group-hover:opacity-100 w-56 duration-500 opacity-0"> 16 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 17 </p> 18 </div> 19 </div> 20</div> 21
849 views
849 views
MIT License