如何使用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

基本思路是

1. 将容器位置改为相对位置，隐藏溢出的内容。
2. 将文本设置为绝对位置，并将其推到底部（隐藏）。
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>