카테고리

질문 & 답변
세부 분야

웹 개발
해결 여부

해결됨

hover했다가 마우스를 뗐을 때 2

22.03.26 23:23 작성 조회수 191

아래 답변이 안와서 다시 남깁니다.

답 주신대로 해보았지만 지속적으로 잔상이 남습니다

그리고 이미 .back에 opacity:0, .item:hover .back에 opacity:1이 있던 상황입니다

지속적으로 안돼서 답변 기다렸는데 안와서요. 왜이런지 궁금합니다

코드 다시 첨부합니다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>hover Example 4</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="items">
      <div class="item">
        <div class="front">
          <img src="img/space-01.png">
          <h3>Mars</h3>
        </div>
        <div class="back">
          <p>화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다. 동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의 전쟁의 신 마르스의 이름을 따 Mars라 부른다.</p>
          <a href="#none">Read More</a>
        </div>
      </div>
      <div class="item">
        <div class="front">
          <img src="img/space-02.png">
          <h3>Jupiter</h3>
        </div>
        <div class="back">
          <p>목성은 태양계의 다섯번째 행성이자 가장 큰 행성이다. 태양의 질량의 천분의 일배에 달하는 거대행성으로, 태양계에 있는 다른 모든 행성들을 합한 질량의 약 2.5배에 이른다.</p>
          <a href="#none">Read More</a>
        </div>
      </div>
      <div class="item">
        <div class="front">
          <img src="img/space-03.png">
          <h3>Saturnus</h3>
        </div>
        <div class="back">
          <p>토성은 태양으로부터 여섯 번째에 있는 태양계의 행성으로, 진성(鎭星)으로도 불렀다. 토성은 태양계 내의 행성 중 목성에 이어 두 번째로 크며, 지름은 약 12만 킬로미터이다.</p>
          <a href="#none">Read More</a>
        </div>
      </div>
    </div>
  </body>
</html>

@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: .5s;
}
.back{
  width: 100%;
  height: inherit;
  line-height: 1.5em;
  position:absolute;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: .5s;
}
.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 p{
  margin: 3px 8px;
}
.back a{
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  background-color: #748ffc;
  border-radius: 3px;
}