嘗試使文本適合覆蓋圖片上的疊加層

Question

CSS：

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

.cont:hover .overlay{
    opacity: 1;
    
    
}
.text {

  color: gold;
  font-size:10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

HTML：

 <article class="box box9"><div class="cont"><img src="images/Me 2.jpg" height = "200px" alt = "Community Program Coordinator and Interim Communications Director for the United Minority Media Association. " class ="image">
      <div class= "overlay text"><div class="text">Ruby Watson is the Community Program Coordinator and Interim Communications Director for the United Minority Media Association. Since 2000, She has worn many hats with this organization. She was the Recording Secretary, Publicist, and National Newsletter/Magazine Editor of UMMA Media News for the United Minority Media Association. She also serves on the Time Well Spent Committee and UMMA KC Watch and is working with our web developer for the ummahqkc1.org website. Ruby has a Bachelor’s in Communications and a Master of Liberal Arts degree. While working on her undergraduate degree, she interned as the Assistant Producer for the Walt Bodine Show, KCUR 89.3 AM, and as production interns for KKFI 90.1 FM and Kansas City Public Television station where she worked closely with Nick Haines, Executive Producer of Public Affairs/News.</div></div></div><h2>Ruby Watson, Interim Vice President of Communications</h2></article>
 <article class="box box9"><div class="cont"><img src="images/Me 2.jpg" height = "200px" alt = "Community Program Coordinator and Interim Communications Director for the United Minority Media Association. " class ="image">
      <div class= "overlay text"><div class="text">Ruby Watson is the Community Program Coordinator and Interim Communications Director for the United Minority Media Association. Since 2000, She has worn many hats with this organization. She was the Recording Secretary, Publicist, and National Newsletter/Magazine Editor of UMMA Media News for the United Minority Media Association. She also serves on the Time Well Spent Committee and UMMA KC Watch and is working with our web developer for the ummahqkc1.org website. Ruby has a Bachelor’s in Communications and a Master of Liberal Arts degree. While working on her undergraduate degree, she interned as the Assistant Producer for the Walt Bodine Show, KCUR 89.3 AM, and as production interns for KKFI 90.1 FM and Kansas City Public Television station where she worked closely with Nick Haines, Executive Producer of Public Affairs/News.</div></div></div><h2>Ruby Watson, Interim Vice President of Communications</h2></article>

出現在覆蓋層上的文本不適合它的目標框

如何確保文本實際移動其左右邊距以適合矩形疊加層？ 提前致謝！

Answer 1

是的。 缺少一些 css 以使所有內容正確排列。
我盡可能少地更改以使其與您已有的內容一起使用，因此我沒有弄亂其他可能相關的內容。
使用您的屏幕截圖作為圖像，因此需要更改寬度和高度。

 .image { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .overlay { position: absolute; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: blue; } .cont { width: 400px; height: 400px; } .cont:hover .overlay { background-color: blue; opacity: 1; width: 290px; height: 220px; } .text { width: -moz-fit-content; width: fit-content; color: gold; font-size: 10px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }

 <article class="box box9"> <div class="cont"> <img src="https://i.stack.imgur.com/nuPgf.png" alt="Community Program Coordinator and Interim Communications Director for the United Minority Media Association. " class="image"> <div class="overlay text"> <div class="text">Ruby Watson is the Community Program Coordinator and Interim Communications Director for the United Minority Media Association. Since 2000, She has worn many hats with this organization. She was the Recording Secretary, Publicist, and National Newsletter/Magazine Editor of UMMA Media News for the United Minority Media Association. She also serves on the Time Well Spent Committee and UMMA KC Watch and is working with our web developer for the ummahqkc1.org website. Ruby has a Bachelor's in Communications and a Master of Liberal Arts degree. While working on her undergraduate degree, she interned as the Assistant Producer for the Walt Bodine Show, KCUR 89.3 AM, and as production interns for KKFI 90.1 FM and Kansas City Public Television station where she worked closely with Nick Haines, Executive Producer of Public Affairs/News. </div> </div> </div> <h2>Ruby Watson, Interim Vice President of Communications</h2> </article>