Card with Hover Effect Using Tailwind UI
For hover effect ‘group-hover’ need to be added with the opacity property in the tailwind config file. this card can be used to display multiple choices to the user, hovering on one of the card show extra infos and make the previous content fade out.
card
Loading component...
195 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- design inspired by https://doublemakers.co/design-subscription/?ref=land-book.com -->
<div class="w-full h-full p-2 pt-12 bg-gray-900 sm:p-10">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="grid grid-rows-3 gap-4">
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
</div>
<div class="hidden grid-rows-3 gap-4 lg:grid lg:mt-24">
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
</div>
<div class="hidden grid-rows-3 gap-4 sm:grid">
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
<div
class="relative shadow-lg group container bg-white w-[250px] h-[250px] sm:w-[317px] sm:h-[317px] flex justify-center items-center mx-auto">
<div class="">
<img class="object-cover w-full" src="https://doublemakers.co/wp-content/uploads/2023/07/EDO_square_02.jpg"
alt="">
</div>
<div
class="absolute justify-between w-full h-full p-4 text-gray-900 transition-opacity duration-300 ease-in-out bg-white opacity-0 group-hover:opacity-100">
<div class="mb-auto">
<span class="mb-2 text-sm font-light sm:text-lg">Legal Services</span>
<h1 class="text-xl font-light leading-normal tracking-wider sm:text-3xl">Enviromental Defenders Office</h1>
</div>
<div class="flex flex-wrap justify-start gap-1 mt-16 text-xs sm:gap-2 sm:text-base">
<button class="rounded-full border border-gray-900 py-0.5 px-2">Web design</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Front-end development</button>
<button class="rounded-full border border-gray-900 py-0.5 px-2">Appeal landing page design</button>
</div>
</div>
</div>
</div>
</div>
</div>