Question

当我用鼠标悬停在图像元素上时，如何在图像上叠加文字？

当我将鼠标悬停在图片上时，文字没有显示我的跨度之间的文字？我已尝试在我的.text类中显示内联块，但是，它会将图像右侧或下方添加，而不是叠加

HTML：

<section id="images">
    <div class="wrapper">
        <div><img style="width: 300px;" src="img/howitworks_tile@2x.jpg"></img><span class="text">How It Works</span></div><div><img style="width: 300px;" src="img/dermvsspec_tile@2x.jpg"></img><span class="text">Dermatologist or Acne Specialist</span></div><div><img style="width: 300px;" src="img/treatments_tile@2x.jpg"></img><span class="text">Facial</span></div>
    </div>
</section>

CSS：

section#images {
   display: block;
}

section#images .wrapper {
   text-align: center;
margin: 0 auto;
}

section#images .wrapper div {
   display: inline-block;
   position: relative;
   background: orange;
}


section#images .wrapper div span {
   display: none;
}

section#images .wrapper div:hover img {
   opacity: 0.8;
}

section#images .wrapper div img span{
   font-size: 24px;
   font-weight: 900;
   font-family: Helvetica;
   color: green;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

section#images .wrapper div img span.text {
   color: white;
   cursor: pointer;
   height: 150px;
   position: absolute;
   opacity: 0;
   left: 0;
   top: 0;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Answer 1

这样的东西？ Demo

您的代码的主要问题是，您不会将<span>与隐藏display:none切换为在鼠标悬停时再次显示该属性的属性。

以下修复：

section#images .wrapper div:hover span {
  display: inline-block;
}

要让<span>位于图片中间，请添加以下内容：

section#images .wrapper div span {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

这会将<span>设置为与父<div>完全相关。然后，使用已应用的left，top和transform属性在中间设置文字。

覆盖图像CSS上的文本

1 个答案: