CSS3 animation, slide-in image caption

CSS3 animation, slide-in image caption
0

#1

Trying to do a slide-in effect using CSS3 animations-property:
https://jsfiddle.net/u0cx3zaa/
but is not working…

HTML:

<div class="bg">
  <img src="https://dummyimage.com/200x200/000/fff.jpg&text=IMG" alt="">
  <div class="box">
    <div>
      <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor</p>
    </div>
  </div>
</div>

CSS:

.bg {
  max-width: 300px;

  position: relative;
  overflow: hidden;
}

img {
  width: 100%; 
  display: block; /* remove blank space between img and .box */
}

.box {
  background-color: red;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center; 

  position: absolute;
  bottom: -130px;

  animation: slide_up 1s easy;
  animation-play-state: paused;
}

.bg:hover .box {
  animation-play-state: running;
}

@keyframes slide_up {
  0% {bottom: -130px;}
  100% {bottom: 0px;}
}

Same animation using _transition-property_ is working https://jsfiddle.net/pt9pkkar/ HTML is the same. CSS:
.bg {
  max-width: 300px;

  position: relative;
  overflow: hidden;
}

img {
  width: 100%; 
  display: block; /* remove blank space between img and .box */
}

.box {
  background-color: red;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center; 

  position: absolute;
  bottom: -50%;  
 -webkit-transition: 0.5s ease;
 -moz-transition:    0.5s ease;
 -o-transition:      0.5s ease;
}

.bg:hover .box {
  bottom: 0%;
}

But… if you reduce the width of your browser the .box show up and overlap the image:


#2

With transition works much better, if you want to reduce size of box when width change you need to set relative units like % for font size

.bg {
  max-width: 300px;
  
  position: relative;
  overflow: hidden;
}

img {
  width: 100%; 
  display: block; /* remove blank space between img and .box */
}

p {
  font-size:  80%;
}

.box {
  background-color: red;
  padding-top: 1%;
  padding-bottom: 1%;
  text-align: center; 
  
  position: absolute;
  
  bottom: -35%; 
  
  -webkit-transition: 0.5s ease;
  -moz-transition:    0.5s ease;
  -o-transition:      0.5s ease;
}

.bg:hover .box {
  bottom: 0;
}

#3

Thanks for your reply but the .box still appear when reducing the browser size :confused:
https://jsfiddle.net/x6bhuj1v/ This fix the problem but how can I vertical-center text inside .box?

.bg {
  max-width: 300px;
  
  position: relative;
  overflow: hidden;
}

img {
  width: 100%; 
  display: block; /* remove blank space between img and .box */
}

.box {
  background-color: red;
  width: 100%;
  height: 0%;
  text-align: center; 
  
  position: absolute;
  bottom: 0px;
  
  -webkit-transition: 0.5s ease;
  -moz-transition:    0.5s ease;
  -o-transition:      0.5s ease;
}

.bg:hover .box {
  height: 30%;
}

#4

this should solve it

  .bg {
  max-width: 300px;
  
  position: relative;
  overflow: hidden;
}

img {
  width: 100%; 
  display: block; /* remove blank space between img and .box */
}

.box {
  background-color: red;
  width: 100%;
  height: 50%;
  text-align: center; 
  
  position: absolute;
  bottom: -50%;
  
  -webkit-transition: 0.5s ease;
  -moz-transition:    0.5s ease;
  -o-transition:      0.5s ease;
}

.bg:hover .box {
  bottom: 0;
}
.box div:first-child {
  background-color: yellow;
  position: absolute;
  font-size: 8px;
  height: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}