[CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover)

hover 사용해서 마우스를 이미지에 올렸을 때

가격하고 제목 띄우도록 만들기.

/* 정사각형 */
.square-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .square {
    position: relative;
    width: 375px;
    height: 375px;
    border: 1px solid $main_color;
    margin: 20px;
    overflow: hidden;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    &:hover .overlay-wrap {
      background-color: rgba(0, 0, 0, 0.6);
      opacity: 1;
    }
  }
  .overlay-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    opacity: 0;

    .overlay {
      font-size: 1.3rem;
      font-weight: bold;
      color: white;
    }
  }
}

투명도를 0 으로 만들었다가

마우스 hover 을 하면 투명도 1 로 만들어서 보이게끔 만듦.