Product Card Hover Image Reveal in tailwind by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="flex justify-center"> <div class="group my-10 flex w-full max-w-xs flex-col overflow-hidden rounded-lg border border-gray-100 bg-white shadow-md"> <a class="relative mx-3 mt-3 flex h-60 overflow-hidden rounded-xl" href="#"> <img class="peer absolute top-0 right-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1620625515032-6ed0c1790c75?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="product image" /> <img class="peer absolute top-0 -right-96 h-full w-full object-cover transition-all delay-100 duration-1000 hover:right-0 peer-hover:right-0" src="https://images.unsplash.com/photo-1619976442556-210d9a914669?q=80&w=2865&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="product image" /> <svg class="pointer-events-none absolute inset-x-0 bottom-5 mx-auto text-3xl text-white transition-opacity group-hover:animate-ping group-hover:opacity-30 peer-hover:opacity-0" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M2 10a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v10a4 4 0 0 1-2.328 3.635a2.996 2.996 0 0 0-.55-.756l-8-8A3 3 0 0 0 14 17v7H6a4 4 0 0 1-4-4V10Zm14 19a1 1 0 0 0 1.8.6l2.7-3.6H25a1 1 0 0 0 .707-1.707l-8-8A1 1 0 0 0 16 17v12Z" /></svg> </a> <div class="mt-4 px-5 pb-5"> <a href="#"> <h5 class="text-xl tracking-tight text-slate-900">ROLEX OYSTER - Date Adjust</h5> </a> <div class="mt-2 mb-5 flex items-center justify-between"> <p> <span class="text-3xl font-bold text-slate-900">$29</span> <span class="text-sm text-slate-900 line-through">$49</span> </p> </div> <a href="#" class="flex items-center justify-center rounded-md bg-slate-900 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300"> <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> </svg> Add to cart</a > </div> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Product Card Hover Image Reveal component in tailwind used to showcase your product in front of your user. Feature hover to revel next image. Catagory Tailwind Tags Hover Effect Product Card Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script>
