Search⌘ K

Glass Image Gallery

Explore how to create a dynamic image gallery using CSS Grid for responsive layouts and glassmorphism techniques to style overlays. Learn to position elements with absolute positioning, apply backdrop filters for visual depth, and use smooth hover transitions, all through CSS without JavaScript.

Problem description

Given HTML markup with a container element .gallery and multiple .gallery-item elements (each containing an <img> and an .overlay element with an <h3> and a <button>), write CSS to:

  • Layout the gallery using CSS Grid: three columns on large screens, two ...