HTML과 CSS를 사용하여 이미지 호버에 텍스트를 표시하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-12-09 00:11:10

원래의

390명이 탐색했습니다.

How to Show Text on Image Hover Using HTML and CSS?

이미지 호버에 텍스트를 표시하는 방법은 무엇입니까?

이미지에 마우스를 올렸을 때 설명 정보를 표시하는 것은 일반적인 요구 사항입니다. 이 문서에서는 HTML과 CSS를 사용하여 이 기능을 우아하게 구현하는 방법을 설명합니다.

문제

많은 개발자가 이 기능을 구현하기 위해 이미지 스프라이트와 마우스 오버를 사용합니다. 그러나 이 방법은 이상적이지 않으며 정확한 효과를 내기가 어렵습니다. 따라서 이번 글에서는 이미지가 아닌 실제 텍스트를 활용하는 방법을 알려드리겠습니다.

솔루션

이 기능을 구현하는 것은 쉽습니다. 이미지와 동일한 크기를 가진 div에 이미지와 마우스 설명 정보를 넣기만 하면 됩니다. 그런 다음 CSS를 사용하여 div에 마우스를 올렸을 때 설명을 표시합니다.

코드 예시

다음은 HTML과 CSS를 사용한 것입니다. 이 기능을 구현하는 코드 예제:

HTML:

<div class="img__wrap">
  <img class="img__img" src="image.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

로그인 후 복사

CSS :

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.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;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

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

로그인 후 복사

위의 예에서는 "

<div class="img__wrap">

로그인 후 복사

이미지와 설명 정보를 하나로 묶습니다. div, 이 div의 크기는 이미지와 동일합니다(높이 200픽셀, 너비 257픽셀)

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

로그인 후 복사

마우스를 올리기 전에 설명 정보를 div 중앙에 배치하세요

visibility: hidden;
opacity: 0;

로그인 후 복사

div에 마우스를 올리면. , 설명 정보를 표시합니다

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