[HTML] CSS 애니메이션 구현하기 - Transition

이런 이미지가 있을 때

 

 

이미지 위에 마우스 커서를 올리면 이렇게 변하도록 만들어 보자.

 

 <div class="shop-bg">
       <div class="shop-container">
           <div class="shop-item">
             <div style="position: relative">
              <div class="overlay">
                  <p>500억</p>
              </div>
               <img src="img/product1-1.jpg"></div>
           </div>
           <div class="shop-item">
               <img src="img/product2.jpg">
           </div>
           <div class="shop-item">
               <img src="img/product3.jpg">
           </div>
       </div>
        
    </div>

기본적인 이미지 위에, 마우스를 올렸을 때 나타나게 할 박스를 만든다.

여기서는 <div class="overlay"> 박스다.

이 박스를 이미지와 같은 위치, 이미지 위에 놓아야 하는데

그렇게 하기 위해서

이미지가 있는 박스를 position: relative 로 묶는다.

그리고 overlay의 속성으로 position: absolute를 주면 된다.

(position:absolute는 position : relative를 가지고 있는 부모를 기준으로 찰싹 달라붙게 된다.)

 

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: all 1s;
    transition-timing-function: cubic-bezier(.49, .69, .64, .29);
    
    text-align: center;
    color: white;
}

overlay 내용이다.

위에서 말한 대로 position:absolute로 설정했고,

background: rgba(0,0,0,0.5)로 설정했다.

(검정색에 불투명도 0.5라는 뜻)

 

(불투명도는 opacity로도 조절할 수 있는데, 평소에는 보이지 않다가

호버시에 opacity를 변경시켜 나타나게 할 것이기에 지금은 0으로 설정함.)

 

.overlay:hover{
    opacity: 1;
}

마우스를 올렸을 때 overlay박스가 나타나도록 opacity를 1로 준다.

.

.

다시 위에있는 .overlay를 보면,

transition: all 1s 라고 되어있는것을 볼 수 있다.

overlay의 모든값 중 어떠한 값이 변하면 1초에 걸쳐 서서히 바뀌게 한다는 뜻이다.

---

이렇게 밑에서 올라와서 중간까지 차지하는 건 어떻게 만들까?

 

첫번째 예시와는 다르게 나타나는 영역이 이미지를 꽉 채우지 않는다.

마우스를 이미지 위에 올렸을 때 애니메이션이 나타났으면 좋겠는데, 정작 애니메이션 영역은 50%밖에 되지 않는다.

 

이를 해결하기 위해, 새로운 div박스를 하나 만든다

<div class="shop-item">
              <div style="position: relative">
                  <div class="overlay-wrap">
                      <div class="overlay-popup">
                      <p>삐딱구두</p>
                  </div></div>
               <img src="img/product2.jpg">
               </div>
           </div>

여기서는 overlay-wrap 박스이다.

.overlay-wrap:hover .overlay-popup{
    top:50%;
}

이렇게 하면 overlay-wrap의 호버상태일 때 overlay-popup의 내용을 변경할 수 있다.

 

.overlay-popup {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 50%;
    background: rgba(0,0,0,0.5);
    transition: all 1s;
}

overlay-popup은 본래 top이 100%이다.

=> position:relative속성을 가진 부모의 발 끝에 위치한다는 것.

 

이 속성이 overlay-wrap의 호버시 50%로 변경되어 이미지의 중앙까지 오게 되는 것이다.

 

그런데, 이렇게만 작성하면 이미지 밑으로 overlay-popup박스가 튀어나올 것이다.

이것을 제한하기 위해서

 

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

overlay-wrap에 

overflow: hidden 속성을 주면 된다.

그러면 이 박스를 벗어나는 것들은 눈에 보이지 않는다.