悬停在HTML上时的文本

Question

我想在悬停它时在图像上放置文字。到目前为止，我已经创建了一个悬停效果来缩放图片并减少看起来光滑的不透明度。我现在的问题是在图像上放置文字，因为我不知道如何将它放在图片中。

以下是我目前的情况：enter link description here

代码：

#portfolio {
  background-color: : white;
  padding-bottom: 100px;
}

#portfolio h1 {
  font-size: 30px;
  font-weight: 400px;
  letter-spacing: 5px;
  text-align: center;
  color: #000;
}

#portfolio h2 {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #000;
}

.project {
  display: inline-block;
  width: 33.33%;
  margin-right: -4px;
}

.img-box {
  padding: 20px;
}

.project img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.img-box img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  opacity: 0.5;
}

<section id="portfolio">
  <div class="container">
    <h1>MY WORK</h1>
    <h2>Below you will find my favorite projects & school assignments</h2>
    <!--CPU-->
    <div class="project">
      <div class="img-box">
        <img src="./img/cpu.png">
      </div>
    </div>
    <!--JAVA-->
    <div class="project">
      <div class="img-box">
        <img src="./img/JSON.png">
      </div>
    </div>
    <!--PHOTOSHOP-->
    <div class="project">
      <div class="img-box">
        <img src="./img/photoshop.png">
      </div>
    </div>
  </div>
</section>

Answer 1

将另一个DIV作为子元素添加到.img-box，其设置如下，其中包含文本。最重要的部分是position: absolute，以及文字位置的top，left和transform设置。

.img-box .hovertext {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-box:hover .hovertext {
  display: block;
}

还要确保将position: relative添加到.img-box以为绝对定位的文本DIV创建锚元素：

＆＃13;

＆＃13;

#portfolio {
  background-color: : white;
  padding-bottom: 100px;
}

#portfolio h1 {
  font-size: 30px;
  font-weight: 400px;
  letter-spacing: 5px;
  text-align: center;
  color: #000;
}

#portfolio h2 {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #000;
}

.project {
  display: inline-block;
  width: 33.33%;
  margin-right: -4px;
}

.img-box {
  padding: 20px;
  position: relative;
}

.project img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.img-box img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  opacity: 0.5;
}

.img-box .hovertext {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-box:hover .hovertext {
  display: block;
}

＆＃13;

<section id="portfolio">
  <div class="container">
    <h1>MY WORK</h1>
    <h2>Below you will find my favorite projects & school assignments</h2>
    <!--CPU-->
    <div class="project">
      <div class="img-box">
        <img src="./img/cpu.png">
        <div class="hovertext">Test Text 1</div>
      </div>
    </div>
    <!--JAVA-->
    <div class="project">
      <div class="img-box">
        <img src="./img/JSON.png">
        <div class="hovertext">Test Text 2</div>
      </div>
    </div>
    <!--PHOTOSHOP-->
    <div class="project">
      <div class="img-box">
        <img src="./img/photoshop.png">
        <div class="hovertext">Test Text 3</div>
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用pseudo-element，您可以将所需的文字添加为属性值，也可以手动添加，这将是可怕的。然后按照自己的方式设置样式，但当然要添加位置：绝对将其从流中取出以便将其放在图像的顶部。并且不要忘记父母的position:relative。

我使用了div，因为<img>没有结束标记，因此没有pseudo-elements

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#portfolio {
  background-color: : white;
  padding-bottom: 100px;
}

#portfolio h1 {
  font-size: 30px;
  font-weight: 400px;
  letter-spacing: 5px;
  text-align: center;
  color: #000;
}

#portfolio h2 {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #000;
}

.project {
  display: inline-block;
  width: 33.33%;
  margin-right: -4px;
}

.img-box {
  padding: 20px;
  position: relative;
}

.img-box:after {
  /* the text will be coming from the custom attribute data-text*/
  content: attr(data-text);
  background: #000000ba;
  width: 100%;
  font-size: 1.5em;
  padding: 10px 0;
  left: 0;
  bottom: 0;
  text-align: center;
  position: absolute;
  opacity: 0;
  transition: opacity .2s linear;
}

.img-box:hover:after {
  opacity: 1;
}

.project img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.img-box img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  opacity: 0.5;
}

＆＃13;

<section id="portfolio">
  <div class="container">
    <h1>MY WORK</h1>
    <h2>Below you will find my favorite projects & school assignments</h2>
    <!--CPU-->
    <div class="project">
      <div data-text="Text" class="img-box">
        <img src="http://via.placeholder.com/350x150">
      </div>
    </div>
    <!--JAVA-->
    <div class="project">
      <div data-text="text on image" class="img-box">
        <img src="http://via.placeholder.com/350x150">
      </div>
    </div>
    <!--PHOTOSHOP-->
    <div class="project">
      <div data-text="i'm a text too" class="img-box">
        <img src="http://via.placeholder.com/350x150">
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;