Wrapping overlay hover text over an Image

Question

I am trying to wrap my text to ensure it fits within the boundaries of my images and their hover overlay however what I have tried so far, including centreing, still does not show the entire text.

Below is the CSS and 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

remove white-space:nowrap and text-align:center and you can use the font-size 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>