선생님 혹시 글씨효과 아래에서 위로 채우는 건 불가능할까요?

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

마우스 올리면 배경이미지 변경하기 with jQuery

작성

637

#gnb9 #menu3 li a::before {
  position: absolute;
  color: red;
  top: 0;
  left: 0;
  white-space: nowrap;
  content: attr(data-m2);
  height: 0%;
  transition: 0.3s;
  overflow: hidden; 
}
#gnb9 #menu3 li a:hover::before {
  height: 100%; 

}.

이렇게 했는데 위에서 아래로 밖에 안되더라구요 그래도 top:0을 bottom으로 바꾸고 다시 시도해봤는데 안되네요

 <section>
      <div id="gnb9">
        <ul id="menu3">
          <li><a href="#home" data-m2="회사소개">회사소개</a></li>
          <li><a href="#profile" data-m2="비전">비전</a></li>
          <li><a href="#vision" data-m2="포트폴리오">포트폴리오</a></li>
          <li><a href="#works1" data-m2="채용공고">채용공고</a></l>
        </ul>
      </div>
      <div class="pic"></div>
    </section>

jquery HTML/CSS

답변 3

yoonk

안녕하세요.! 같이 공부하고 있는 수강생입니다.

저도 오른쪽->왼쪽/ 아래쪽에서 -> 위쪽 방향은 어떻게 하면 될까? 궁금해서 이 곳 저 곳 찾아보니까 이렇게 하면 된다는 방법을 공유하고자 답변 남깁니다.!

<왼쪽->오른쪽/ 위쪽에서 -> 아래쪽/ 강의에 다룬 것처럼 영어로만 하다가, 한글로 하신거 그대로 처음 해봤는데 정리차원에서! 또한, 남깁니다. >

:before에 top/left 값 주니까 한글이 좀 틀어지더라구요.! 그래서 빼니까 자연스러워서 뺐어요.!

<오른쪽->왼쪽/ 아래쪽-> 위쪽>

기존 <a>태그 부분에 :hover에 주고 싶은 값(yellowgreen)을 미리 넣고! :before에 기존 보이는 색(#fff)으로 width: 100% 덮어야해요.!

그러고 :hover 됐을 때 width:0; 으로 :before 기본색(#fff)이 빠지고 <a>태그에 주고 싶은 값이 보이도록 하면 원하시는 방향 둘 다 가능하더라구요.!

-> 그리고, 캡쳐이미지엔 100%로 되어있는데 한글은 height( 위쪽->아래쪽/ 아래쪽->위쪽) 할 때 100%하면 좀 잘리거나 빼꼼 색이 나오길래 110% 줘야할 거 같아요.!

그럼 같이 으쌰으쌰 도움이 됐기를 바라며, 화이팅하세요:)

코딩웍스(Coding Works)

지식공유자

yoonk 님~ 답변 감사드립니다~!!

코딩웍스(Coding Works)

지식공유자

    #menu3 li a {
      position: relative;
   }

위에 처럼 relative가 없는데 있어야 정확히 위치를 맞출 수 있습니다.

#gnb9 #menu3 li a::before {
      position: absolute;
      color: red;
      /* top: 0; */
      bottom: 0;
      left: 0;
      white-space: nowrap;
      content: attr(data-m2);
      height: 0%;
      transition: 0.3s;
      overflow: hidden;
   }

#gnb9 #menu3 li a:hover::before {
      height: 100%;
   }

bottom: 0로 하면 되긴 하는데 올라오는게 어색하네요.

왼쪽에서 오른쪽으로 가는건 width: 0% 와 width: 100%로 하시면 됩니다.

이거 역시 오른쪽에서 왼쪽으로 가는것도 right: 0로 하면되는데 이거 역시 어색하네요.

오른쪽에서 왼쪽, 아래에서 위로 어색하지 않게 올라오는 방법은 당장은 생각이 안나네요...

코딩웍스(Coding Works)

지식공유자

어느 방향이던 가능합니다.

html 코드도 올려주세요.

oo !

질문자

올렸습니다 !

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

선생님 혹시 글씨효과 아래에서 위로 채우는 건 불가능할까요?