Design upload image

by Guillaume Seguin

HTML

<div class="page">
  <div class="image-container">
    <div class="overlay"></div>
    <img src="https://pix.yanport.com/cities/52421265/streetview/9-villa-de-l-ermitage.jpeg" alt="" />
  </div>
</div>

SCSS

.page {
  background-color: lightgreen;
  height: 100vh;
  
  .image-container {
    position: relative;
    background-color: lightcoral;
    
    &:hover {
    .overlay {
      display: block;
    }
  }
    
    .overlay {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }
    
    img {
      width: 100%;
      display: block;
    }
  }
}