library_books<div class="card">
  <div class="container" style="background: #9fa8da">
    <img src="images/aaa.png">
    <div class="overlay toBottom">
      <div class="text">Hello World</div>
    </div>
  </div>
</div>

library_books<style>
.card {
  padding: 10px;
  height: 300px;  /* control height */
  width: 400px;   /* control width */
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor:pointer;
 }
.container {
  background:#f5e7c2;
  position: relative;
  height:100%;
  overflow:hidden; 
}
/* Position your image to center with 100% height*/
.container img {
  height: 100%;
  display: block;
  margin: auto;
}
.overlay {
  position: absolute;
  background-color: #ec407a;
  overflow: hidden;
  transition: .5s ease;
}

/* toBottom & toTop overlay  */
.toTop{bottom: 0;}
.toBottom{top: 0;}
.toBottom, .toTop{
  width:100%;
  height:0;
  left: 0;
}
.container:hover .toBottom, .container:hover .toTop {
  height: 100%;
}

/* toRight & toLeft overlay  */
.toLeft{right: 0;}
.toRight{left: 0;}
.toRight, .toLeft{
  top:0;
  width:0;
  height:100%;
}
.container:hover .toRight, .container:hover .toLeft{
  width: 100%;
}

/*Position the text*/
.text {
  color: #fff;
  font-size: 20px;
  padding: 8px;
  position: absolute;
  top:50%;
  width: 100%;
  text-align: center;
}
</style>