How to transition text using CSS onto an image with hover? - css

Question

I spent the last two hours creating the following code, and I'm almost done. I just want the text to transition upwards on the image when hovering (image to still be visible). I have looked at other questions/answers that are similar, but the code they use isn't working with mine. Any suggestions?
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

Basic idea is
Make container position to relative, hide overflowing content.
Make text absolute position and push it bottom (hide it).
Reveal it on hover
.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>