javascript - 在悬停时在图像上书写

Question

我想在鼠标悬停时在图像上添加说明文字。最好的方法是什么？我需要任何 js 还是有 css 解决方案？

代替片段中的 div，我有圆形的图像。悬停 img 会使它变大一点，如示例所示。

感谢您的帮助。

.circle{
  width: 150px;
  height: 150px;
  background: yellow;
  border-radius: 100%;
  text-align:center;
  display: inline-block;
  transition: all .2s ease-in-out;
}
.circle:hover{
  transform: scale(1.1);
  
}

<div class="circle">

</div>
<div class="circle">

</div>
<div class="circle">

</div>

Answer 1

.circle{
  width: 150px;
  height: 150px;
  background: yellow;
  border-radius: 100%;
  text-align:center;
  position: relative;
  display: inline-block;
  transition: all .2s ease-in-out;
}
.hoverContent {
  opacity: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
   transition: all .2s ease-in-out;

}
.circle:hover{
  transform: scale(1.1);
}

.circle:hover .hoverContent {
   opacity: 1;
}

<div class="circle">
  <span class="hoverContent">Hey there 1</span>
</div>
<div class="circle">
  <span class="hoverContent">Hey there 2</span>
</div>
<div class="circle">
  <span class="hoverContent">Hey there 3</span>
</div>