Обтекание текста при наведении на изображение

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

удалить пробел: nowrap и text-align: center, и вы можете использовать размер шрифта 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>