Challenge card

Hi, the overlay was tricky for me to figure out as well.

The solution is to add an .overlay element as a sibling to the image, use position: absolute; to place the overlay on top of the image, then toggle the overlay based on the :active/:hover states.

For ex:

<div>
  <img />
  <div class="overlay">The overlaying content goes in here</div>
</div>

Next, here's a nice toggling I use for hiding an element:

.hide {
  visibility: hidden;
  opacity: 0;
}

Then use the exact opposite values for showing the element.

Check out an overlay guide here: Overlay

I hope this helps, happy coding!