html - 中心图标 + CSS 上的文本悬停图像

Question

美好的一天，当我将鼠标悬停在图像上时，我正试图使我的图标和文本居中。我的问题是他们似乎不以自己为中心。我会显示我的 html 和 css。另外，我正在使用 bootstrap 4。我尝试使用“overlay”和“overlay-text”标签将图标和文本居中，但两者都悬在顶部。任何帮助将不胜感激。

代码:

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f08300;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.spacer {
  margin: 20px 0px 20px 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12 text-align-center">
      <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
    </div>

    <div class="col-md-4 col-xs-12">

      <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
      <div class="overlay">
        <img src="img/icon-beauty-white.png" class="img-responsive center-block card-icon-sm">
        <div class="spacer overlay-text">BEAUTY</div>
      </div>

    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_health.jpg">
    </div>
    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
    </div>
  </div>
</div>

Answer 1

您走在正确的轨道上，将要在叠加层上显示的内容包装起来并向其添加 CSS，并相应地调整图像和文本。

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f08300;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay-content {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.spacer {
  margin: 20px 0px 20px 0px;
}

<div class="container">
  <div class="row">
    <div class="col-md-12 text-align-center">
      <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
    </div>

    <div class="col-md-4 col-xs-12">

      <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
      <div class="overlay">
        <div class="overlay-content">
          <img src="img/icon-beauty-white.png" class="img-responsive center-block card-icon-sm">
          <div class="spacer overlay-text">BEAUTY</div>
        </div>
      </div>

    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_health.jpg">
    </div>
    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
    </div>
  </div>
</div>