How to make modify this css [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 months ago.
This post was edited and submitted for review 2 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I'm looking at using [this piece of css][1] 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 ?
HTML:
<h3>Hover over the image to see the effect.</h3>
<div class="container">
<img src="https://walter.trakt.tv/images/movies/000/472/401/fanarts/thumb/ae10b31b1f.jpg.webp" alt="Avatar" class="image" style="width:100%">
<div class="textbox">
<div class="text">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>
CSS:
.container {
position: relative;
width: 500px;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.textbox {
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;
}

Answer 1

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%;
}

Answer 2

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 class="container">
<img src="https://walter.trakt.tv/images/movies/000/472/401/fanarts/thumb/ae10b31b1f.jpg.webp" alt="Avatar" class="image" style="width:100%">
<div class="textbox">
<div class="text">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>