HTML 및 CSS를 사용하여 이미지 위에 텍스트를 표시하는 호버 효과를 만들려면 어떻게 해야 합니까?

HTML 및 CSS를 사용하여 이미지에 마우스를 올려 텍스트 표시

이미지 위에 텍스트를 표시하는 마우스 오버 효과를 만드는 것은 어려운 작업처럼 보일 수 있습니다. , 그러나 HTML과 CSS를 사용하면 놀라울 정도로 간단한 프로세스가 됩니다.

문제: 기능이 제한된 이미지 스프라이트

처음에는 많은 개발자가 배경 이미지 위치를 이동하여 다양한 마우스 오버 상태가 표시되는 이미지 스프라이트를 사용합니다. 그러나 이 접근 방식에는 실제 텍스트를 사용할 수 없다는 점에서 한계가 있습니다.

해결책: 투명 이미지 오버레이

원하는 효과를 얻으려면 이미지와 정확히 동일한 크기로 단일 컨테이너에 이미지와 호버 텍스트를 모두 래핑할 수 있습니다. CSS를 사용하여 호버 텍스트를 이 컨테이너 내에 절대적으로 배치하고 기본적으로 보이지 않게 만듭니다.

.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
}

사용자가 컨테이너 위에 마우스를 올리면 CSS 호버를 사용하여 호버 텍스트를 점차적으로 표시합니다.

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

HTML 마크업

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

이 기술을 사용하면 HTML 마크업을 쉽게 표시할 수 있습니다. 마우스를 올리면 이미지 위에 동적 텍스트가 추가되어 웹사이트에 세련된 대화형 터치를 제공합니다.

위 내용은 HTML 및 CSS를 사용하여 이미지 위에 텍스트를 표시하는 호버 효과를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!