Text formatting in overlay div - html

Question

I'm trying to create a hover overlay on an image. I got the code from; https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I'm having an issue with the text, I am trying to put a small title and one sentence description under it. I can't seem to make it fit, as a new line pushes the above text further up, and leaving it on one paragraph tag makes it over flow.
I am using wordpress, custom-css plugin and a WYSIWYG editor.
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: pre;
color: #000000;
font-size: 20px;
position: absolute;
overflow: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img class="image" src="https://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Shakletons.png" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">
<p><span style="font-size: small;">Inspiring products of indoor and outdoor furniture</span>
</p>
</div>
</div>
</div>
How can I make the text 'fit' into the hover box?

Answer 1

You need to remove the <p> and <span> tags and remove this line:
white-space: pre;
and replace this:
font-size: 20px;
with this:
font-size: small;
That is all you need to fix it, but I have taken the liberty to simplify your code as well.
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
overflow: visible;
}
.text {
position: absolute;
font-size: small;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img class="image" src="https://via.placeholder.com/500x500" alt="logo"/>
<div class="overlay">
<div class="text">
Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>

Answer 2

you mean this ?
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: #000000;
position: absolute;
font-size: small;
text-align: justify;
padding: 0 10px;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
<div class="container">
<img class="image" src="http://via.placeholder.com/500x350" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>
<div class="container">
<img class="image" src="http://via.placeholder.com/300x150" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>
<div class="container">
<img class="image" src="http://via.placeholder.com/600x550" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>

Answer 3

Have a look to this:
I have removed white-space: pre; that was impeding the text to wrap on a new line, I also have removed the overflow property you put more or less everywhere, then I changed the image with one without the white canvas and changed some height and width to fit the container.
.container {
float: left;
position: relative;
width: 25%;
overflow: hidden;
}
p {margin:0}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
width: 100%;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: #000000;
font-size: 20px;
text-align:center;
float: left;
text-align: justify;
padding: 0 10px;
margin-top: 50%;
transform: translateY(-50%);
}
<div class="container">
<img class="image" src="http://via.placeholder.com/400x400" alt="logo" width="100%" />
<div class="overlay">
<div class="text">
<p><span style="font-size: small;">Inspiring products of indoor and outdoor furniture</span>
</p>
</div>
</div>
</div>