HTML과 CSS만 사용하여 마우스 오버 시 이미지 위에 텍스트를 표시하려면 어떻게 해야 합니까?

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

웹 디자인에서 사용자가 이미지 위에 마우스를 놓았을 때 나타나는 설명 텍스트를 추가하면 사용자 경험. 이 텍스트는 이미지에 대한 귀중한 정보를 제공하여 상호작용적이고 매력적인 탐색 경험을 제공합니다.

HTML과 CSS만을 사용하여 이 효과를 얻는 것은 비교적 간단합니다. 단계별로 수행할 수 있는 방법은 다음과 같습니다.

1. 컨테이너 div에 이미지와 마우스 오버 텍스트를 래핑합니다.
   이미지와 텍스트 주위에 div를 만듭니다. 마우스를 올리면 표시됩니다. 이 div는 이미지와 높이 및 너비가 동일해야 합니다.
2. 호버 텍스트를 컨테이너 div 내에 절대적으로 배치합니다.
   CSS를 사용하여 호버 텍스트를 컨테이너 div 내에 절대적으로 배치합니다. . 위치를 절대값으로 설정하고 위쪽, 아래쪽, 왼쪽, 오른쪽을 0으로 설정하여 이미지 내에서 올바르게 정렬합니다. 처음에는 가시성을 숨김으로, 불투명도를 0으로 설정합니다.
3. 호버 효과 조정:
   마지막으로 컨테이너 div에 호버 효과를 사용하여 호버 텍스트를 표시합니다. 사용자가 이미지 위로 마우스를 가져가면 가시성을 표시로 설정하고 불투명도를 1로 설정하여 마우스 오버 텍스트가 표시되고 완전히 불투명해져야 합니다.

 <img class="img__img" src="http://placehold.it/257x200.jpg" /><br> <p></div>