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

@mehulmpt 我的错。对不起。我用div做了一些例子。我应该用imgs。你的代码是正确的想要我想，但它不适用于imgs，它不能，因为img没有结束标记。我该如何重写呢？谢谢你的时间。

.circle{
display: inline-block;
  transition: all .2s ease-in-out;
  width: 150px;
}
.circle:hover{
  transform: scale(1.1);
  
}

<img src="http://www.matmasar.wz.cz/kone.png" class="circle">
<img src="http://www.matmasar.wz.cz/kone.png" class="circle">
<img src="http://www.matmasar.wz.cz/kone.png" class="circle">

Answer 3

仅使用CSS和HTML属性。

＆＃13;

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

＆＃13;

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

＆＃13;

在悬停时写入img

3 个答案: