Question

我在网站上搜索很多但没有找到解决方案。我试图在有人悬停图像时显示文字，所以我所做的是：

.seeImage {
  background: black;
  padding: 0;
  display: inline-block;
  width: 475px;
  height: 36ppx;
}
.seeImage img {
  display: block;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.hoverimg {
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
}
.seeImage:hover .hoverimg {
  visibility: visible;
}

<div class="seeImage">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <div class="hoverimg">
    <p>Text text</p>
    <p>More text</p>
  </div>
</div>

我在div上有两个段落，其中包含“hoverimg”类，而段落显示在50％之后，（它们不在中间，它们位于图像中间之后）。

有人有理由为什么会这样？我想我可以通过margin-top :(负）px修复它，但如果我需要剪切或添加更多内容，我将永远应该再次更新保证金，所以有人知道怎么做而不使用保证金？

提前致谢！

jsfiddle：https://jsfiddle.net/p6ybpahq/20/ 我希望悬停图像时显示的文本将位于图像的中间

Answer 1

.seeImage {
  background: black;
  padding: 0;
  display: inline-block;
  position: relative;
}
.seeImage img {
  display: block;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.hoverimg {
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  visibility: hidden;
  transform: translate(-50%, -50%);
}
.seeImage:hover .hoverimg {
  visibility: visible;
}

<div class="seeImage">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <div class="hoverimg">
    <p>Text text</p>
    <p>More text</p>
  </div>
</div>

您可以使用transform: translate(-50%, -50%);垂直和水平居中对齐元素。

Jsfiddle

Answer 2

使用此CSS

.seeImage {
    background: black;
    padding: 0;
    display: inline-block; 
    width: 475px;
    height: 36ppx;
    position: relative;  //Added this
}

.seeImage img {
  position: relative;
  display: block;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.hoverimg {
    overflow: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    visibility: hidden;
    transform: translate(-50%, -50%);
}

.seeImage:hover .hoverimg {
  visibility: visible;
}

Answer 3

这完全不同，但我建议将图像用作背景图像，并根据背景图像的宽度和高度对其进行居中。文本的顶部和左侧是45％而不是50％，因为您需要考虑文本的宽度和高度，使其居中。

.hoverimg {
    background: url(http://www.online-image-editor.com//styles/2014/images/example_image.png) no-repeat;
    height:500px;
    width:500px;
    background-size:cover;
    background-position:center;
    position:relative;
}
.text{
  display:none;
  position:absolute;
  top:45%;
  left:45%;
}
.hoverimg:hover .text{
  display:block;
}

<div class="seeImage">
    <div class="hoverimg">
    <div class="text">
      <p>Text text</p>
      <p>More text</p>
    </div>
  </div>
</div>

https://jsfiddle.net/p6ybpahq/29/

试图将div放在其他div的中间但没有成功

3 个答案: