인프런 커뮤니티 질문&답변

영상을 먼저 보고 스스로 만드는 도중에 거슬리는 부분이 있어 질문드립니다.

마우스를 item에 hover하다가 뗐을 때

back부분의 텍스트가 잔상처럼 남다가 사라집니다.

hover했다가 떼는 순간에 back부분은 없어지게 하는 방법은 없을까요?(영상에선 hover했다가 떼는 순간에 슬라이드되는 것처럼 back부분이 없어지는데 뭐가 문젠지 모르겠습니다) back에 transition을 주지 않으면 back부분이 단순히 생겼다 사라져서 문제를 해결할 수는 있지만 front부분처럼 슬라이드되는 느낌이 없어져서요.

투명도 문제인가해서 front부분에 투명도를 아예 없애봤지만 잔상처럼 잠깐 남았다가 사라져서 시각적으로 보기 불편합니다. 어떻게 해앟ㄹ까요? 아래가 css소스코드입니다.

 

 

 

 

 

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@keyframes bigger-animation {
  0% {
    transform: scale(80%);
  }
  100% {
    transform: scale(110%);
  }
}
body {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 13px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #4c6ef5;
}
.items{
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  justify-content: space-evenly;
}
a{
  text-decoration: none;
  color: black;
}
.item {
  width: 250px;
  height: 200px;
  text-align: center;
  position: relative;
  border-radius: 10px;
}
.front{
  width: 100%;
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 1;
  box-shadow: 0 0 13px #91a7ff;
  transition: .2s;
}
.item:hover .front , .back {
  background-color: rgba(186, 200, 255, .7);
}
.item:hover .front{
  top:-50%;
  box-shadow: none;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid rgba(0,0,0,.5);
}
.item:hover .front img {
  animation: bigger-animation .4s linear infinite alternate;
}
.item:hover .back{
  top:50%;
  opacity: 1;
  border-radius: 0 0 10px 10px;
}
.front h3{
  margin: 0;
  padding: 0;
}
.back{
  width: 100%;
    height: inherit;
    line-height: 1.5em;
    position:absolute;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: .2s;
}
.back p{
  margin: 3px 8px;
}
.back a{
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  background-color: #748ffc;
  border-radius: 3px;
}