<div class="image-cont">
  <img src="https://placehold.co/800x520" alt="image">
  <p>Taco is a very friendly cat. She loves to play, cuddle and do tricks.</p>
</div>
*{
  box-sizing: border-box;
}
.image-cont {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  /* Overflow property is used to control the display of the */
  /* overflow: scroll; */
  overflow: hidden;
}
img{
  display: block;
  width: 100%;
}
.image-cont p {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  background-color: #acacac;
  color: white;
  margin: 0;
  padding: 10px;
  left: 100%;
  -webkit-transition: all 500ms ease-in;
  -moz-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}

.image-cont:hover p {
  left: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.