HTML と CSS を使用して、ホバー時に画像の上にテキストを表示する方法

.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;
}

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