WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Football Players Exhibition Gallery
2793
Andev.web
Open In Editor
Publish Your Code
Recommended
18 August 2024
Gallery of sites with hover and blur effect
24 August 2025
InspireX: Modern Web Theme (Tailwind, Video, Gallery)
9 September 2024
Fish gallery
HTML
Copy
Andev Web
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Figtree", sans-serif; } body { display: grid; place-content: center; min-height: 100vh; background: #000; } .container { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 1em; width: 800px; height: 500px; transition: all 400ms; } .container:hover .box { filter: grayscale(100%) opacity(24%); } /*Andev Web*/ .box { position: relative; background: var(--img) center center; background-size: cover; transition: all 400ms; display: flex; justify-content: center; align-items: center; } .container .box:hover { filter: grayscale(0%) opacity(100%); } .container:has(.box-1:hover) { grid-template-columns: 3fr 1fr 1fr 1fr 1fr; } .container:has(.box-2:hover) { grid-template-columns: 1fr 3fr 1fr 1fr 1fr; } .container:has(.box-3:hover) { grid-template-columns: 1fr 1fr 3fr 1fr 1fr; } .container:has(.box-4:hover) { grid-template-columns: 1fr 1fr 1fr 3fr 1fr; } .container:has(.box-5:hover) { grid-template-columns: 1fr 1fr 1fr 1fr 3fr; } .box:nth-child(odd) { transform: translateY(-16px); } .box:nth-child(even) { transform: translateY(16px); } .box::after { content: attr(data-text); position: absolute; bottom: 20px; background: #000; color: #fff; padding: 10px 10px 10px 14px; letter-spacing: 4px; text-transform: uppercase; transform: translateY(60px); opacity: 0; transition: all 400ms; } .box:hover::after { transform: translateY(0); opacity: 1; transition-delay: 400ms; }
JS
Copy