Как перенести текст с помощью CSS на изображение с наведением?

Question

Я потратил последние два часа на создание следующего кода и почти закончил. Я просто хочу, чтобы текст переходил вверх на изображении при наведении курсора (изображение все еще было видно). Я просмотрел другие похожие вопросы / ответы, но код, который они используют, не работает с моим. Есть предложения?

HTML

<div class="One">
    <p class="img-description">TEST!</p>
<img src="https://media2.giphy.com/media/vFKqnCdLPNOKc/giphy.gif?cid=ecf05e47eb603b7921279bc600f6c24e2c59bff5d8050e4b&rid=giphy.gif">
</div>

    <div class="Two"> <p class="img-description-two">TEST!</p>
        <img src="https://media0.giphy.com/media/26xBEez1vnVb2WgBq/200w.webp?cid=ecf05e47eb603b7921279bc600f6c24e2c59bff5d8050e4b&rid=200w.webp">
    </div>

        <div class="Three">
            <p class="img-description-three">TEST!</p>
            <img src="https://media.giphy.com/media/Y7l6oTRsxCC1a/giphy.gif">
        </div>

CSS

body {
    position: relative;
    height: 500px;
    border: #ffd28a 5px solid;
}

.One {
    display: inline-flex;
    justify-content: space-evenly;
    background-color: #ffd28a;
    width: 250px;
    height: 250px;
    position: relative;
    top: 100px;
    left: 110px;
    margin: 0 100px 0 0;
    border: 5px solid #ffd28a;
    border-radius: 8px;
}

.img-description {
    display: none;
    width: 240px;
    height: 240px;
    background-color: #ffd28a;
    position: relative;  
    margin: 0 90px 0 0;
    border: 5px solid #ffd28a;
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
}

.One:hover .img-description {
    display: inline-block;
    visibility: visible;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 5px;
    border: 5px solid #ffd28a;
    border-radius: 8px;
}

.Two {
    display: inline-flex;
    justify-content: space-evenly;
    background-color: #ffd28a;
    border: royalblue;
    width: 250px;
    height: 250px;
    position: relative;
    top: 100px;
    left: 175px;
    margin: 0 100px 0 0;
    border: 5px solid #ffd28a;
    border-radius: 8px;
}

.img-description-two {
    display: none;
    width: 240px;
    height: 240px;
    background-color: #ffd28a;
    position: relative;  
    margin: 0 90px 0 0;
    border: 5px solid #ffd28a;
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
}

.Two:hover .img-description-two {
    display: inline-block;
    visibility: visible;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 5px;
    border: 5px solid #ffd28a;
    border-radius: 8px;
}


.Three {
    display: inline-flex;
    justify-content: space-evenly;
    background-color: #ffd28a;
    border: sandybrown;
    width: 250px;
    height: 250px;
    position: relative;
    top: 100px;
    left: 220px;
    margin: 0 100px 0 0;
    border: 5px solid #ffd28a;
    border-radius: 8px;
}

.img-description-three {
    display: none;
    width: 240px;
    height: 240px;
    background-color: #ffd28a;
    position: relative;  
    margin: 0 90px 0 0;
    border: 5px solid #ffd28a;
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
}

.Three:hover .img-description-three {
    display: inline-block;
    visibility: visible;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 5px;
    border: 5px solid #ffd28a;
    border-radius: 8px;
}

img {
    width: 250px;
    height: 250px;
    border: 5px ;
    border-radius: 7px;
}

Answer 1

Basi c идея:

1. Сделать положение контейнера относительным, скрыть переполненное содержимое.
2. Сделать текст абсолютным положением и sh нижним (скрыть).
3. Показывать при наведении

.img-container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.img-container p {
 background: #fff;
  position: absolute;
  bottom: -50px;
  z-index: 1;
  left: 35%;
  transition: 1s;
}

.img-container:hover p {
  bottom: 20px;
}

<div class="img-container">
  <img src="https://i.picsum.photos/id/83/300/250.jpg" />
  <p>Image Caption</p>
</div>