Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Glass Image Gallery

Problem: Glass Image Gallery

Try to 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: three columns on large screens, two on medium, and ...