Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Glass Image Gallery

Solution: Glass Image Gallery

Let’s create a responsive image gallery with hover-activated glass overlays that reveal titles and buttons.

We'll cover the following...

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: ...