覆盖覆盖将文本悬停在图像上

Question

我试图包装我的文本，以确保它符合我的图像和他们的悬停覆盖，然而，我已经尝试了，包括中心化，仍然没有显示整个文本。

下面是CSS和HTML

​

.hoverimg {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 70%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.hoverimg:hover .overlay {
  width: 70%;
}

.overlaytxt {
  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%);
  white-space: nowrap;
  text-align: center;
}

<div class="hoverimg"><img alt="The Engineer" class="image" src="/drupal/sites/default/files/inline-images/CE_0.png" />
  <div class="overlay">
    <div class="overlaytxt">Garry "Big Gaz" Oldman is our Chief Engineering officer and leader of the fleet, he ensures all of the moving vehicles are perfect for our needs</div>
  </div>
</div>

​

Answer 1

删除空白:现在和文本对齐:中心，你可以使用字体大小的vw。

​

.hoverimg {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 70%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.hoverimg:hover .overlay {
  width: 70%;
}

.overlaytxt {
  color: white;
  font-size: 1.5vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

 
}

<div class="hoverimg"><img alt="The Engineer" class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" />
  <div class="overlay">
    <div class="overlaytxt">Garry "Big Gaz" Oldman is our Chief Engineering officer and leader of the fleet, he ensures all of the moving vehicles are perfect for our needs</div>
  </div>
</div>

​