HTML과 CSS를 사용하여 마우스 오버 시 이미지 위에 텍스트를 표시하는 방법은 무엇입니까?

HTML 및 CSS를 사용하여 마우스오버 시 텍스트 표시

마우스를 올리면 이미지 위에 텍스트를 표시하려는 과정에서 처음에는 이미지 스프라이트를 사용했습니다. 기반의 솔루션입니다. 그러나 이제는 실제 텍스트를 사용하여 더 깔끔한 접근 방식을 모색합니다.

해결책은 이미지와 설명 모두에 대한 래퍼로 div 요소를 사용하는 것입니다. 이 div는 이미지와 동일한 크기를 가져야 합니다. CSS를 조작하면 div 위로 마우스를 가져갈 때 설명의 가시성을 결정할 수 있습니다.

이 효과를 얻기 위한 단순화된 코드 조각:

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

HTML에서:

<div class="image-wrapper">
  <img src="image.jpg" />
  <p class="image-description">This is the image description.</p>
</div>

위 내용은 HTML과 CSS를 사용하여 마우스 오버 시 이미지 위에 텍스트를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!