transtion (애니메이션 효과)

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

.overlay {
  position: absolute;
  // absolute는 떠서, 부모인 position: relative; 에 달라붙음
  width: 100%;
  height: 100%;
  background: rgb(0,0,0,0.5);
  opacity: 0; // 시작스타일
  transition: all 1.5s; // 1.5초간에 스타일을 변화시켜라
}
.overlay:hover {
  opacity: 1; // 최종스타일
}

출처 : 코딩애플