CSS) ::before & ::after 가상요소 transition 적용 / content 속성은 opacity, visibility, transform을 모두 적용 해야 애니메이션 가능✅

 

마우스가 호버 됐을 때 버튼이 변경되면서 transition을 적용하는 css를 작성 중이다.

 

 

 

전체를 .cardWrap으로 감싸고 총 세줄의 상품 카드가 있고 

.imgCard라는 div 컨테이너 안에 a > img > span의 구조로 되어있다.

[ html ]

<!-- 상품 이미지카드 -->
    <div class="cardWrap">
      <div class="imgCard">
          <a href="/">
            <img src="./assets/discovery/honeytea.jpg" alt="꿀생강차" />
            <span></span>
          </a>
          <a href="/">
          <img src="./assets/discovery/vaseline.jpg" alt="바세린" />
            <span></span>
          </a>
      </div>

      <div class="imgCard">
          <a href="/">
          <img src="./assets/discovery/handcream.jpg" alt="핸드크림" />
            <span></span>
          </a>
          <a href="/">
            <img src="./assets/discovery/bibs.jpg" alt="빕스아기사랑" />
            <span></span>
          </a>
          <a href="/">
            <img src="./assets/discovery/hanssem.jpg" alt="한샘수납장모음" />
            <span></span>
          </a>
          <a href="/">
            <img src="./assets/discovery/dumpling.jpg" alt="개성왕만두" />
            <span></span>
          </a>
      </div>
      
      ...
    </div>

 

 

처음 css 코드

...
.imgCard span {
  transition: all 3s ease-in-out;
}

.imgCard span:hover::after {

  content: '구매하기';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 20px;
  text-align: center;
  padding: 1.3rem 2rem 1.3rem 0.5rem;
  font-size: 1.4rem;
  width: 9.2rem;
  background: url(../../assets/icon/angle-right-square.svg) no-repeat right var(--color-gray-300);
  background-color: var(--color-blue-600);
  color: var(--color-white);

}

 

 

 마우스가 호버 했을 때 파란색 바탕에 [구매하기]라는 글씨가 적힌 버튼이 나와야 하니 transition을 .imgCard span에 주었는데 변화가 없었다.

 

여기서 중요한 것❗❗

  ::after라는 가상 요소에 transition 스타일을 적용하려는 점이다.  

transition을 적용하려면, 변경 전후 상태에 대해 transition이 적용될 수 있는 속성이 필요하다. 그래서(  .imgCard span에 transition을 주었었다.) 

하지만, content, display 속성은  transition으로 애니메이션을 줄 수 없다. 대신 다른 속성을, 즉 opacity, transform, 또는 visibility 등을 사용해야 부드러운 전환이 가능하다.

 이 경우 ::after나 ::before 가상요소에 꼭 필요한 content는 애니메이션이 적용되지 않으므로, opacity와 visibility를 사용하여 요소가 서서히 나타나도록 설정했다.

 

 

위 css코드를 보면 display: block을  적용했는데 처음에 html에 <span> 구매하기 </span> 마크업을 했었다.

span이 inline 요소라서 레이아웃을 잡을 때 display: block으로 했는데 작업 도중에 position: absolute; top, left로 레이아웃을 변경해서 추후에 삭제했다.

 

• opacity: 0: 요소는 보이지 않지만, 사용자와의 상호작용(클릭, 포커스 등)은 가능, 레이아웃(공간)차지함.
  • 요소가 숨겨져 있지만 클릭할 수 있게 하거나, 애니메이션을 통해 점진적으로 나타나게 하고 싶을 때 사용. 다른 요소가 해당 공간을 침범 못함.
• visibility: hidden: 요소는 보이지 않으며, 사용자와의 상호작용이 불가능함.
  • 사용자가 클릭, 접근 불가능. 레이아웃에서 공간을 여전히 차지함.  다른 요소가 해당 공간을 침범 못함.
• display: none: 요소는 보이지 않고, 레이아웃에서 공간도 차지하지 않음.
  • 요소가 완전히 DOM돔에서 제거된 것처럼 작동해 레이아웃에서 공간도 사라짐. 다른 요소가 해당 공간을 채움.

 

 

 완성된 [ css ]

/* 구매하기 버튼*/
.imgCard span::after {
  content: '구매하기';
  position: absolute;
  left: 20px;
  bottom: 20px;
  text-align: center;
  padding: 1.3rem 2rem 1.3rem 0.5rem;
  font-size: 1.4rem;
  width: 9.2rem;
  background: url(../../assets/icon/angle-right-square.svg) no-repeat right var(--color-gray-300);
  background-color: var(--color-blue-600);
  color: var(--color-white);

  opacity: 0;
  /* 기본 상태에서는 투명하게. 보이지 않아도 레이아웃 자리 차지함 */
  visibility: hidden;
  /* 기본 상태에서는 보이지 않게. 사용자는 요소를 클릭하거나 접근X 공간 차지함. */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* opacity와 visibility에 대해 애니메이션 적용 */
  // 혹은 transition: all 0.3s ease-out; 

}

.imgCard span:hover::after,
.imgCard span:focus::after {
  opacity: 1;
  /* 마우스를 올렸을 때 완전히 보이게 */
  visibility: visible;
  /* 마우스를 올렸을 때 보이게 */
}

/* //구매하기 버튼*/

• opacity: 0과 visibility: hidden을 기본 상태로 설정해 요소가 보이지 않게 한다.
• transition: opacity 0.3s ease, visibility 0.3s ease를 사용해 opacity와 visibility가 변할 때 애니메이션이 적용되게 함.
• hover 상태에서는 opacity: 1과 visibility: visible로 설정하여 가상 요소가 부드럽게 나타나도록 함.

이렇게 하면 hover 시 ::after 가상 요소가 서서히 나타나는 애니메이션 완성✨✨.

 

 

 

 참고

나, 쳇지피티