---

구현된 모습

---

코드

HTML

    <div class="portfolio__img">
      <div class="img__row1">
        <div class="item1">
          <div class="overlay"></div>
            <div class="item__text">
              <h4>Portfoilo-1</h4>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
            </div>
        </div>

        <div class="item2">
          <div class="overlay"></div>
          <div class="item__text">
            <h4>Portfoilo-2</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
          </div>
        </div>
      </div>
      </div>
      <div class="img__row2">
        <div class="item3">
          <div class="overlay"></div>
          <div class="item__text">
            <h4>Portfoilo-3</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
          </div>
        </div>
        <div class="item4">
          <div class="overlay"></div>
          <div class="item__text">
            <h4>Portfoilo-4</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
          </div>
        </div>
      </div>
    </div>

CSS

.img__row1 {
  display: flex;
  position: relative;
  justify-content: center;
}

.img__row2 {
  display: flex;
  position: relative;
  justify-content: center;
}

.overlay {
  position: absolute;
  width: 50%;
  height: 100%;
  border: 50px solid white;
  opacity: 0;
  transition: all 1.5s;
}

.overlay:hover {
  opacity: 1;
}

구현하는 방법

1. div태그를 생성한다(클래스명: overlay).
2. overlay로 지정한 태크의 위치를 absolute속성을 활용하기 위해 상위 엘리먼트인
   .img__row1에 position: relative;속성을 넣어주고, .overlay에 position: absolute;을 추가해준다.
   (position: absolute; 특징 => 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다.)

 <div class="img__row1">
    <div class="item1">
       <div class="overlay"></div>    

3. 애니메이션 시작시 동작될 내용들을 작성하고, opacity: 0;으로 안보이게 해둔다.
4. transition: all 1.5s;의 뜻은 .overlay 속성은 어느 속성이든 변하면 1.5초에 걸쳐서 변환해준다는 의미이다.
5. .overlay:hover일때 opacity: 1;로 설정해주면 완성이다!

.img__row1 {
  display: flex;
  position: relative;
  justify-content: center;
}

.overlay {
  position: absolute;
  width: 50%;
  height: 100%;
  border: 50px solid white;
  opacity: 0;
  transition: all 1.5s;
}

.overlay:hover {
  opacity: 1;
}