Transition 속성으로 CSS 애니메이션 구현하기

hover 효과를 내고 싶을 때는 position: absolute를 사용한다.

그리고 z-index로 우선순위만 설정해주면 됨!!

---

이미지와 Hover 박스 사이즈가 안 맞는 문제

overlay 박스의 길이가 이미지의 길이랑 안 맞는다.
왜냐면, 이미지 밑에 보통 보이지 않는 선 같은 게 있기 때문에 그렇다.

• 해결법

img에 display:block; 속성을 주면 된다.

<div class="shop-item">
          <div style="position: relative">
            <div class="overlay"></div>
            <img src="/img/product1-1.jpg" alt="" />
          </div>
</div>

.shop-item img {
  width: 100%;
  z-index: 1;
  // 이미지와 overlay 박스 크기를 같게 하기 위해!!
  display: block;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

---

hover 효과시 박스 반만 올라오게 만들기

img 태그에 hover를 거는 거 않좋은 이유

img에 직접적으로 hover를 거는 건 안좋다. 왜냐면, hover시 overlay 박스가 올라올텐데, 마우스를 overlay 박스가 덮으면, 그때는 마우스가 img를 건들고 있는게 아니기 때문에, hover효과가 종료된다. 그러다가 overlay박스가 내려오면서, 다시 마우스를 만나면 hover효과가 다시 시작되기 때문에 박스가 마우스를 중심으로 왔다갔다 한다.

내가 한 방법

// HTML
 <div class="shop-item">
          <div class="overlay-wrap" style="position: relative">
            <div class="overlay">
              <p>$60</p>
            </div>
            <img src="/img/product1-1.jpg" alt="" />
          </div>
        </div>

// CSS

.shop-item img {
  width: 100%;
  z-index: 1;
  display: block;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 100%;
}

.overlay-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.overlay-wrap:hover .overlay {
  background-color: black;
  opacity: 0.5;
  transition: all 1s;
  top: 50%;
}

---

one-way 애니메이션 효과 잘 만드는 스텝 :

one-way 애니메이션은 A에서 B로 정지없이 쭉 이동하는 애니메이션을 뜻합니다.

1. 시작스타일 정하기
   
   
2. 최종스타일 정하기
   => 항상 시작스타일과 최종스타일을 먼저 짜놓자!!
3. 언제 최종스타일로 변할때, 트리거 주기 (대부분 마우스 올렸을 때임)
   
   
4. transition 으로 서서히 동작하게 만들기

이런 스텝으로 CSS 코드 짜면 끝입니다.

transition 축약형 사용하기

.overlay-wrap:hover .overlay {
 
  transition: 0.5s 1s;
  
 //  => duration, delay

}

transition을 사용할 때, 초 값이 한 번 더 나오면, 걔는 delay 값이다.

위의 예를 풀어보면,

0.5초 동안 재생되게하고, 1초 뒤에 시작되게 하라!!