애니메이션 효과가 들어간 상품 레이아웃 만들기

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다.
https://codingapple.com/course/html-basics/

 

 

 

1. 시작 스타일 만들기

   이미지만 있는 css 작성

 <div class="shop-bg">
  <div class="shop-container">
    <div class="shop-item">   
       <img src="image/product.jpeg" alt="제품 이미지" />
    </div>
    <div class="shop-item">       
        <img src="image/product.jpeg" alt="제품 이미지" />       
    </div>
    <div class="shop-item">           
        <img src="image/product.jpeg" alt="제품 이미지" />
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}
.shop-bg {
  background-color: rgb(210, 210, 210);
  padding: 20px;
}

.shop-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  margin: auto;
}

.shop-item {
  width: 33%;
  max-width: 300px;
  padding: 20px;
}

.shop-item img {
  width: 100%;
  display: block;  /*이미지 밑에 보이지 않는 선 있어서 overlay박스와 크기 다를때 이미지에 display:block 해준다*/
}

 

이렇게 하면 처음 스타일이 만들어짐 얍

 

 

 

2. 최종 스타일 만들기

• 이미지위에 오버레이 될 투명도있는 박스를 이미지 바로 위에 붕 띄우도록 한다.
• 붕 띄우는 효과 위해 position absolute 주고, 그러기 위해 부모 relative를 이미지와 overlay 박스를 함께 감싸준다.

 <div class="shop-bg">
  <div class="shop-container">
    <div class="shop-item"> 
 <!--추가--> <div style="position: relative">
 <!--추가-->       <div class="overlay"></div>
        <img src="image/product.jpeg" alt="제품 이미지" /> 
  <!--추가-->    </div>
 	</div>        
  </div>
</div>

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0; /* opacity를 0으로 한게 처음스타일, 1로 한게 최종스타일 */
}

 

 

3. 언제 최종 스타일로 변하는지 정하기

   최종스타일 opacity:1 은  hover 일때 주기로 한다. 

.overlay:hover {
  opacity: 1;
}

 

 

 

4. transition으로 애니메이션  

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
 /* + */ transition: all 1s;
 /* + */ transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}