인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

oo !님의 프로필 이미지
oo !

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션 이펙트)

선생님 왜 코드가 안먹을까요? ㅠㅠ 위아래로 떨어져야하는데 호버가 안먹습니다

작성

·

185

1


    <section id="ob2">
      <div class="object2">
        <div class="up">
          <img src="img/ob2.jpg" alt="" />
          <span>별 우는 하나에 가을로 이름을 멀듯이</span>
        </div>
        <div class="down">
          <p>
            애기 청춘이 풀이 흙으로 어머님, 거외다. 다 가슴속에 새워 슬퍼하는
            까닭이요, 책상을 무덤 오는 봅니다. 하나에 별 파란 같이 그리워
            무엇인지 별 버리었습니다
          </p>
          <a href="#none">more</a>
        </div>
      </div>
<section>
/* ob2 */

#ob2 {
  display: flex;
  justify-content: space-around;
}

#ob2 .object2 {
  width: 20%;
  position: relative;
  cursor: pointer;
  text-align: center;
}
#ob2 .object2 .up {
  z-index: 2;
  border: 1px solid #555;
  width: 100%;
  height: auto;
}

#ob2 .object2 .up img {
  width: 100%;
  height: auto;
}
#ob2 .object2 .up span {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #fff;
}

#ob2 .object2 .up,
#ob2 .object2 .down {
  position: absolute;
  width: 100%;
  transition: 0.5s;
  top: 0;
}

#ob2 .object2 .down {
  border: 1px solid #555;
  padding: 10px;
  height: 300px;
}
#ob2 .object2 .down p {
  font-size: 1.6rem;
}
#ob2 .object2 .down a {
  display: inline-block;
  background-color: #333;
  padding: 5px 10px;
  color: #fff;
  font-size: 1.6rem;
}
#ob2 .object2:hover .up {
  top: -50%;
}
#ob2 .object2:hover .down {
  top: 50%;
}

답변 1

0

붉은색 글씨 부분을 확인해보세요.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    /* ob2 */

    * {

      box-sizing: border-box;

    }

    #ob2 {

      display: flex;

      justify-content: space-around;

    }

    #ob2 .object2 {

      width: 300px;

      height: 300px;

      position: relative;

      cursor: pointer;

      text-align: center;

    }

    #ob2 .object2 .up {

      z-index: 2;

      border: 1px solid #555;

      width: 100%;

      height: auto;

    }

    #ob2 .object2 .up img {

      width: 100%;

      height: auto;

    }

    #ob2 .object2 .up span {

      display: block;

      /* font-size: 1.4rem; */

      font-weight: bold;

      background-color: #fff;

    }

    #ob2 .object2 .up,

    #ob2 .object2 .down {

      position: absolute;

      width: inherit;

      height: inherit;

      transition: 0.5s;

      top: 0;

    }

    #ob2 .object2 .down {

      border: 1px solid #555;

      padding: 10px;

      height: 300px;

    }

    #ob2 .object2 .down p {

      /* font-size: 1.6rem; */

    }

    #ob2 .object2 .down a {

      display: inline-block;

      background-color: #333;

      padding: 5px 10px;

      color: #fff;

      /* font-size: 1.6rem; */

    }

    #ob2 .object2:hover .up {

      top: -50%;

    }

    #ob2 .object2:hover .down {

      top: 50%;

    }

  </style>

</head>

<body>

  <section id="ob2">

    <div class="object2">

      <div class="up">

        <img src="img/ob2.jpg" alt="" />

        <span>별 우는 하나에 가을로 이름을 멀듯이</span>

      </div>

      <div class="down">

        <p>

          애기 청춘이 풀이 흙으로 어머님, 거외다. 다 가슴속에 새워 슬퍼하는

        </p>

        <a href="#none">more</a>

      </div>

    </div>

    <section>

</body>

</html>

oo !님의 프로필 이미지
oo !
질문자

감사합니다! 

oo !님의 프로필 이미지
oo !

작성한 질문수

질문하기