在圖像上包裹覆蓋懸停文本

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

刪除 white-space:nowrap 和 text-align:center ，您可以使用 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>