slide in text on image hover css

Question

I'm trying to make a text appear on image hover, but will need it to slide in from top and cover only 50% of image height, but not sure how can I get this to work, here is the code

<img style="background-color:#3b283e; float:left;" src="images/f1.jpg" />
<div class="cags1">Traditional Pastry</div>

and the CSS

.cags1{
    background-color: #3b283e;
    float:left;
}

.cags1:hover > img {
    opacity:0.5;
    padding: 10px;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 3px #000000;
}

If you don't include it it's like you never tried and looking for someone to write this code for you, and this is not what stackoverflow is for... put an example of what you tried, let other people know that you spent some time over it, trying to solve it yourself. — Dekel, Aug 19 '17 at 00:20

score 1 · Accepted Answer · answered Aug 19 '17 at 00:34

Here is a working example based on your code:

.img-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.img-container img {
  background-color:#3b283e;
  float:left
}
.cags1 {
    background-color: #3b283e;
    position: absolute;
    top: -20px;
    transition: 0.5s;
}

.img-container:hover > img {
    opacity:0.5;
    padding: 10px;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 3px #000000;
}
.img-container:hover .cags1 {
  top: 20px;
}

<div class="img-container">
  <img src="https://dummyimage.com/150x75/992c99/313abd" />
  <div class="cags1">Traditional Pastry</div>
</div>

slide in text on image hover css

1 Answers1