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 one on small.

• Position .overlay absolutely over the image, hidden by default (opacity: 0, translateY(20px)).

• Style the overlay with background: rgba(255,255,255,0.2), backdrop-filter: blur(6px), rounded corners, and padding.

• On .gallery-item:hover, transition the overlay to opacity 1 and translateY(0) over 0.3s.

Goal

Write CSS rules for the grid layout, card positioning, glassmorphic overlay styling, hover transitions, and responsive media queries to achieve a dynamic image gallery.

Constraints

• Use only CSS (no JavaScript).

• Gallery grid should be display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;.

• Overlay panel should be rgba(255,255,255,0.2) and background should be backdrop-filter: blur(6px), border-radius: 8px, padding: 1rem.

• Overlay default state should be opacity: 0; transform: translateY(20px);.

• Overlay hover state should be opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease;.

• Media queries are optional if auto-fit is not used, but the grid should collapse gracefully.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.