a{
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
}

p {  
  position: absolute;
  /* display: block; */
  z-index: 3;
  margin:0;
  padding-top:-30px;
  bottom:0px;
  left:0;   
  height: 30px;
  width:100%;
  font-size:2em;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  opacity:0;
  background:rgba(52, 73, 94, .7);
}

img {
  /*position: relative;*/
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
}

a:hover p {  
  transition:opacity .75s ease, height 1s ease;
  opacity:1;
  height: 100%;  
}