(SCSS) 마우스 오버 시에 이미지 오버레이

html

<div class="image-item">
  <img src="https://images.pexels.com/photos/324658/pexels-photo-324658.jpeg" />
  <div class="overlay"></div>
</div>

css

.image-item {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;

  img {
    width: 100%;
    height: 100%;
  }

  &:hover .overlay {
    display: block;
  }
  .overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 1;
    .close {
      position: absolute;
      cursor: pointer;
      font-size: 1.8rem;
      top: 5px;
      right: 8px;
    }
  }
}

실행 결과

See the Pen image overlay by gloria (@gloriaJun) on CodePen.