悬停时写在 img 上

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>

Answer 2

仅使用 CSS 和 HTML 属性。

.circle {
  width: 150px;
  height: 150px;
  text-align: center;
  background: yellow;
  border-radius: 100%;
  position: relative;
  display: inline-block;
  transition: all .2s ease-in-out;
}
.circle:hover{
  transform: scale(1.1);
}
/* NEW CODE */
.circle:after {
  content: attr(data-desc);
  display: none;
  position: absolute;
  top: 50%;
  background-color: white;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle:hover:after {
  display: inline-block;
}

<div class="circle" data-desc="Hello"></div>
<div class="circle" data-desc="World"></div>
<div class="circle" data-desc="just wrap the img and it works">
  <img width="100%" height="100%" src="http://www.matmasar.wz.cz/kone.png">
</div>