-
Flexbox hover gallery Animation
HTML
CSS
JavaScript
<div class="gallery"> <div class="card" style="background-image: url('https://picsum.photos/800/600?random=1');"> <span>Mountain</span> </div> <div class="card" style="background-image: url('https://picsum.photos/800/600?random=2');"> <span>Ocean</span> </div> <div class="card" style="background-image: url('https://picsum.photos/800/600?random=3');"> <span>Forest</span> </div> <div class="card" style="background-image: url('https://picsum.photos/800/600?random=4');"> <span>Desert</span> </div> </div>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1a1a1a; font-family: sans-serif; } .gallery { display: flex; width: 90vw; height: 400px; gap: 10px; } .card { flex: 1; /* All items start equal size */ overflow: hidden; cursor: pointer; border-radius: 12px; position: relative; transition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 1); /* The key to the animation */ background-size: cover; background-position: center; filter: grayscale(80%); } /* On hover, this card grows and the others shrink */ .card:hover { flex: 5; filter: grayscale(0%); } .card span { position: absolute; bottom: 20px; left: 20px; color: white; font-size: 1.5rem; font-weight: bold; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; } .card:hover span { opacity: 1; transform: translateY(0); }
Live Preview
- Flexbox hover gallery Animation