悬停时覆盖图像答案

【问题标题】：Writing over img on hover悬停时覆盖图像
【发布时间】：2017-10-20 13:56:32
【问题描述】：

我想在悬停时在图像上放置一个说明文字。最好的方法是什么？需要js还是有css解决方案？

我有圆形图像，而不是 sn-p 中的 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>

【问题讨论】：

你可以通过 css 轻松做到这一点。那为什么是 js？

标签： javascript html css hover css-transitions

【解决方案1】：

仅使用 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>

【讨论】：

是的，谢谢，我想要的东西，但不知何故不适用于图像。我在下面的评论中发布了一个 sn-p。我不知道如何重写它以适应。你有什么？感谢您的宝贵时间

【解决方案2】：

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

【讨论】：