Adjusting the height of the text-box

Question

I am trying to display a text on the image when you hover the mouse over the text. With the code below I already managed to do it, but I encountered a certain problem. I want to adjust the height of the text box according to my preferences. So as you can see on the CSS, I made the text slightly visible, but because there is a lot of text in the text box, it covers nearly half of my image. I wanted to adjust the text box to make it cover at least 1/4 of the image, but when I put new heights the website crashed. Can somebody tell me how to adjust the height of the textbox?

---HTML---

<div class="gallery" id="nasaNews">
                        <img src="NasaLive.jpg" />
                        <div class="overlay">
                            NASA is now live-streaming views of Earth from space captured by four commercial high-definition video cameras that were installed on the exterior of the International Space Station last month. The project, known as the High Definition Earth Viewing (HDEV) experiment, aims to test how cameras perform in the space environment. You can see the live HD views of Earth from space above.To view the Nasa Live follow the Youtube Link: 
                            </div>
                    </div>

---CSS---

#nasaNews {
    position: relative;
}


    #nasaNews div {
        position: absolute;
        resize: both;
        min-height: 10px;
        line-height: 20px;
        bottom: 0;
        right: 5px;
        background: white;
        color: black;
        margin-bottom: 5px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        opacity: 0.5;
        visibility: visible;
        -webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
        transition: visibility 0s, opacity 0.5s ease-in-out;
    }

    /* Hover on Parent Container */
    #nasaNews:hover {
        cursor: pointer;
    }

        #nasaNews:hover div {
            width: inherit;
            height: inherit;
            visibility: visible;
            opacity: 1;
            text-align: center;
        }

Answer 1

This should do the trick.Yellow is your image.
The part you are wrong is you forgot to put height and width to your parent container class #nasaNews.

#nasaNews {
  overflow: hidden;
  position: relative;
  padding: 15px 15px;
  box-sizing: border-box;
  width: 250px;
  height: 250px;
}

.myimg {
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: yellow;
  height: 100%;
  width: 100%;
}

#nasaNews .overlay {
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
  resize: both;
  line-height: 20px;
  background: #0000007a;
  color: white;
  box-sizing: border-box;
  
  padding-top: 45px 10px;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: auto;
  resize: none;
  opacity: 0;
  text-align: center;
  -webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
  transition: visibility 0s, opacity 0.5s ease-in-out;
  
}


/* Hover on Parent Container */

#nasaNews:hover {
  cursor: pointer;
}

#nasaNews:hover .overlay {
  opacity: 1;
  height: 100%;
  text-align: center;
}

<div class="gallery" id="nasaNews">
  <img src="NasaLive.jpg" class="myimg" alt="My Image" />
  <div class="overlay">
    NASA is now live-streaming views of Earth from space captured by four commercial high-definition video cameras that were installed on the exterior of the International Space Station last month. The project, known as the High Definition Earth Viewing (HDEV)
    experiment, aims to test how cameras perform in the space environment.
    You can see the live HD views of Earth from space above.To view the Nasa Live follow the Youtube Link:
  </div>
</div>

Answer 2

You can control it with CSS, there is a few options :

overflow: hidden -> All text overflowing will be hidden.

overflow: visible -> Let the text overflowing visible.

overflow: scroll -> put scroll bars if the text overflows

word-wrap: break-word -> automatically newline instead of being hidden or making a scrollbar

Put these properties in your div that contains the text.