Created
January 22, 2023 13:57
-
-
Save aeither/11ee02bc42bf2241dbf84b100e5f7ab0 to your computer and use it in GitHub Desktop.
tailwind group hover
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| https://play.tailwindcss.com/hDwqVGDYqS | |
| --> | |
| <div class="relative flex min-h-screen justify-center overflow-hidden bg-gray-50 py-6 sm:py-12"> | |
| <div class="flex flex-col"> | |
| <div class="group relative h-96 w-96 bg-[url('https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80')] bg-cover"> | |
| <div class="absolute flex flex-col items-center justify-center inset-16 rounded-3xl bg-zinc-400/10 p-8 shadow backdrop-blur-sm backdrop-brightness-90 transition-all duration-300 group-hover:top-6 group-hover:bottom-6"> | |
| <h3 class="absolute p-8 text-4xl opacity-100 translate-y-0 text-white transition-all duration-300 font-bold group-hover:opacity-0 group-hover:-translate-y-4">Hover</h3> | |
| <h3 class="absolute p-8 text-md opacity-0 -translate-y-4 text-white transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">Sint laboris reprehenderit ad aute.</h3> | |
| </div> | |
| </div> | |
| <div class="group relative h-96 w-96 bg-[url('https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80')] bg-cover"> | |
| <div class="absolute flex flex-col items-center justify-center inset-16 rounded-3xl bg-zinc-400/10 p-8 shadow backdrop-blur-sm backdrop-brightness-90 transition-all duration-300 group-hover:top-6 group-hover:bottom-6"> | |
| <h3 class="absolute p-8 text-4xl opacity-100 translate-y-0 text-white transition-all duration-300 font-bold group-hover:opacity-0 group-hover:-translate-y-4">Hover</h3> | |
| <h3 class="absolute p-8 text-md opacity-0 -translate-y-4 text-white transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">Sint laboris reprehenderit ad aute.</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col"> | |
| <div class="group relative h-96 w-96 bg-[url('https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80')] bg-cover"> | |
| <div class="absolute flex flex-col items-center justify-center inset-16 rounded-3xl bg-zinc-400/10 p-8 shadow backdrop-blur-sm backdrop-brightness-90 transition-all duration-300 group-hover:top-6 group-hover:bottom-6"> | |
| <h3 class="absolute p-8 text-4xl opacity-100 translate-y-0 text-white transition-all duration-300 font-bold group-hover:opacity-0 group-hover:-translate-y-4">Hover</h3> | |
| <h3 class="absolute p-8 text-md opacity-0 -translate-y-4 text-white transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">Sint laboris reprehenderit ad aute.</h3> | |
| </div> | |
| </div> | |
| <div class="group relative h-96 w-96 bg-[url('https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80')] bg-cover"> | |
| <div class="absolute flex flex-col items-center justify-center inset-16 rounded-3xl bg-zinc-400/10 p-8 shadow backdrop-blur-sm backdrop-brightness-90 transition-all duration-300 group-hover:top-6 group-hover:bottom-6"> | |
| <h3 class="absolute p-8 text-4xl opacity-100 translate-y-0 text-white transition-all duration-300 font-bold group-hover:opacity-0 group-hover:-translate-y-4">Hover</h3> | |
| <h3 class="absolute p-8 text-md opacity-0 -translate-y-4 text-white transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">Sint laboris reprehenderit ad aute.</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment