중급모듈..

[우재현]

중급모듈에 Transition 숙제 : 상품진열 레이아웃과 애니메이션 이 강좌인데요.

선생님처럼 overflow:hidden을 써서 사라지게 했지만, 아래사진처럼 찝찝하게 조금 남네요..
제가 css코드를 잘못작성했을까요? ㅜㅜ



<코드>

/* ■■■■■■■■■■■ 애니메이션 만들기 ■■■■■■■■■■■ */
.shop-bg
{
  background-color: #eee;
  padding: 20px;
}

.shop-container
{
  display:flex;
  width: 70%;
  margin: auto;
}

.shop-item
{
  width: 33%;
  padding: 10px;
}

.shop-item img
{
  width: 100%;
  /* display: block; */
}

.overlay
{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 1.5s;
  color: white;
}

.overlay-wrap:hover
{
  opacity: 0.7;
}

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

.overlay-wrap:hover .overlay-black
{
  margin-top: 50%
}

.overlay-black
{
  width: 100%;
  height: 100%;
  background-color: rgba(223, 89, 89, 0.3);
  margin-top: 100%;
  transition:all 1s;
  /* overflow: hidden; */
}

[codingapple]

이미지에 display block 줘봅시다

[우재현]

*.☆⸜(⑉˙ᗜ˙⑉)⸝♡.*   감사합니다 ㅜㅜ

[글쓴이]

글