Challenge card

Community feedback

• 

  Bel Sahn•440

  @BelumSPosted over 2 years ago

  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!

  0