Live video example
Introduction
Creating a Nike-style hover animation using Tailwind CSS involves combining the utility classes provided by Tailwind with custom styles for the hover effect. Here's a basic example to get you started:
Source code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
transitionProperty: {
'background': 'background'
}
}
}
}
</script>
</head>
<body class="bg-[url('./images/background.png')] bg-auto">
<main class="flex items-center justify-center h-screen">
<div class="gap-20 w-6/12 m-auto">
<div class="flex h-2 mb-20">
<h1 class="text-white text-3xl font-semibold">Best selling</h1>
</div>
<div class="flex items-center justify-between">
<div class="box bg-gray-100 p-4 rounded-md shadow-md hover:shadow-xl shadow-md group hover:bg-gradient-to-r from-indigo-400 to-indigo-300 transition-all delay-100">
<img src="./images/1.png" width="180px" class="drop-shadow-2xl -rotate-45 group-hover:rotate-0 -translate-y-4 -translate-x-2 group-hover:-translate-y-2 group-hover:translate-x-1 delay-100 transition-all"/>
<h2 class="text-gray-500 font-semiBold group-hover:text-white">Nike E-Series AD</h2>
<p class="text-gray-400 group-hover:text-gray-50">₹ 6,395</p>
</div>
<div class="box bg-gray-100 p-4 rounded-md shadow-md hover:shadow-xl shadow-md group hover:bg-gradient-to-r from-zinc-400 to-zinc-300 transition-all delay-100">
<img src="./images/2.png" width="180px" class="drop-shadow-2xl -rotate-45 group-hover:rotate-0 -translate-y-4 -translate-x-2 group-hover:-translate-y-2 group-hover:translate-x-1 delay-100 transition-all"/>
<h2 class="text-gray-500 font-semiBold group-hover:text-white">Nike E-Series AD</h2>
<p class="text-gray-400 group-hover:text-gray-50">₹ 6,495</p>
</div>
<div class="box bg-gray-100 p-4 rounded-md shadow-md hover:shadow-xl shadow-md group hover:bg-gradient-to-r from-green-400 to-green-300 transition-all delay-100">
<img src="./images/3.png" width="180px" class="drop-shadow-2xl -rotate-45 group-hover:rotate-0 -translate-y-4 -translate-x-2 group-hover:-translate-y-2 group-hover:translate-x-1 delay-100 transition-all"/>
<h2 class="text-gray-500 font-semiBold group-hover:text-white">Nike E-Series AD</h2>
<p class="text-gray-400 group-hover:text-gray-50">₹ 6,695</p>
</div>
</div>
</div>
</main>
</body>
</html>
Thanks for reaching the bottom of our blog post! If you've enjoyed our content, take the next step: subscribe to our YouTube channel for exclusive perks.
Top comments (0)