1

Code:

.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>

The text that is appearing on the overlay does not fit the box on which it is destined

How do I ensure that the text actually moves it's left and right margins to fit on the rectangular overlay? Thanks in advance!

Rana
  • 2,500
  • 2
  • 7
  • 28
Scott Owen
  • 11
  • 2

1 Answers1

0

Yeah. There's some css missing to make everything line up correctly.
I changed as little as possible to make it work with what you already had so I didn't mess up other stuff that might be related.
Used your screenshot as the image, so width and height need to be changed.

.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>
Foregotten
  • 1
  • 1