代码：
.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;
}<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>出现在覆盖上的文本不适合指定的框
如何确保文本实际移动其左右边距以适合矩形覆盖？提前感谢！
是的。缺少一些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>