실전퍼블리싱(위아래로 분리되는 hover 네비게이션 이펙트)

위아래로 분리되는 hover 네비게이션 이펙트

예제보기

HTML

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

CSS

/* Google Web Font */
@import url('https://font.googleapis.com/css?family=Raleway&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  font-family: 'Noto Sans KR', 'sans-serif';
  color: #fff;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
  background-color: #222;
  font-size: 15px;
}
a {
  color: #fff;
  text-decoration: none;
}

.items {
  width: 970px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.item {
  width: 300px;
  height: 200px;
  display: inline-block;
  position: relative;
  margin: 10px;
}
.front,
.back {
  position: absolute;
  top: 0;
  transition: 0.5s;
}
.front {
  background-color: #333;
  text-align: center;
  height: inherit;
  width: 100%;
  z-index: 1;
}
.item:hover .front img {
  animation: ani 1s linear infinite;
}
.front h2 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
}
.back {
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  height: inherit;
  opacity: 0;
}
.back a {
  background-color: yellowgreen;
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
}
.back a:hover {
  background-color: #000;
}
.item:hover .front {
  top: -50%;
}
.item:hover .back {
  top: 50%;
  opacity: 1;
}

@keyframes ani {
  0%, 100% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
}