CODEWITHSUNDEEP
cssimagetextcss-transitionstransition
Cutecat42
Cutecat42

Reputation: 77

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

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;
}

Upvotes: 1

Views: 160

Answers (1)

Vaibhav
Vaibhav

Reputation: 1473

Basic idea is

  1. Make container position to relative, hide overflowing content.
  2. Make text absolute position and push it bottom (hide it).
  3. 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>

Upvotes: 2

Related Questions