Как предотвратить появление контента за пределами div? ⇐ CSS

[Anonymous]

У меня есть этот код, но он не работает так, как я хочу.
Моим намерением было создать блок с изображением. Когда кто-то наводит курсор мыши на поле, изображение должно заменяться неким информационным текстом, который сдвигается вверх и закрывает изображение, чтобы дать вам подробную информацию об этом изображении.
Но в итоге я столкнулся с ситуацией, когда информационный текст появляется под изображением и сдвигается вверх, закрывая изображение, когда вы наводите на него курсор.

Код: Выделить всё

* {
/*padding: 0;
margin: 0;*/
box-sizing: border-box;
}

.main{
float: left;
margin: 10px;
}

.main, .front, .back {
position: relative;
height: 300px;
width: 300px;
display: block;
}

.back{
position: relative;
padding: 10px 10px 10px 10px;
text-align: justify;
top: 0px;
right: 0px;
color: #fff;
background-color: #333333;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.div-text {
height: 220px;
}

.main:hover .back {
display: block;
top: -300px;
}

button {
display: inline-block;
padding: 0.35em 1.2em;
border-radius: 0.5em;
box-sizing: border-box;
margin:3px;
text-decoration: none;
background-color: #fff;
border: solid #32dc32;
color: #33cc66;
transition: all 0.2s;
}

button:hover {
color: #fff;
background-color: #33cc66;
}

Код: Выделить всё

[img]https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg[/img]


Image Name
Image description blah blah blah blah blah blah blah blah blah

Read more

Содержимое «заднего» div не должно появляться до тех пор, пока после вы не наведете курсор на «основной» div, и определенно не должно появляться за пределами поля. Но по какой-то причине он появляется под ним, прежде чем я наведу курсор.
Что мне делать, чтобы содержимое не появлялось за пределами «основного» div.

Подробнее здесь: https://stackoverflow.com/questions/657 ... s-of-a-div