How to make modify this css-CodePudding

I'm looking at using this piece of css but I don't want the text to wrap so soon. I'd like it take up 80% of the width of the image. What do I need to modify to make that happen ?

<h3>Hover over the image to see the effect.</h3>

CodePudding user response：

Just change the width property for the ('.textbox') class. This will cause the text area to take more space on the image and it won't wrap so soon. If you are trying to test it in fiddle, just make sure you hit the 'run' cmd on the top left after you make the change.

    .textbox {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
      width: 80%;
    }

CodePudding user response：

Add width: 80% to the textbox css

.container {
  position: relative;
  width: 500px;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.textbox {
  width: 80%;
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .textbox {
  opacity: 1;
}

.text {
  background-color: #04AA5D;
  color: white;
  font-size: 15px;
  padding: 10px 10px;
}

<h3>Hover over the image to see the effect.</h3>

<div >
  <img src="https://walter.trakt.tv/images/movies/000/472/401/fanarts/thumb/ae10b31b1f.jpg.webp" alt="Avatar"  style="width:100%">
  <div >
    <div >Each Christmas Eve, the Ghost of Christmas Present selects one dark soul to be reformed by a visit from three spirits. But this season, he picked the wrong Scrooge. Clint Briggs turns the tables on his ghostly host until Present finds himself reexamining his own past, present and future.</div>
  </div>
</div>