.box {
    background: #ccc;
    width: 16.66666%;
    float: left;
    overflow: hidden;
    position: relative;
    border: 1px solid white;
	cursor: pointer;
}

.box img {
  /*max-height: 100%;*/
	height: 354px;
	width: 100%;
}

.text-overlay {
    height: 15%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #000;
    background: #fcb80b;
    padding: 0 1em;
    transition: all 0.5s ease-out;
}
.box:hover > .text-overlay {
  height: 25%;
  background: #eee;
}

.text-overlay h3 {
  height: 25%;
  margin-bottom: 0;
}

.text-overlay p {
  height:0;
  overflow: hidden;
}

.box:hover h3, .box:hover p {
  height: auto;
}

/** CSS only animations **/
@-webkit-keyframes expand {
  0% {
    height: 100%;
    width: 100%;
  }
  100% {
    height: 105%;
    width: 105%;
  }
}
@keyframes expand {
  0% {
    height: 100%;
    width: 100%;
  }
  100% {
    height: 105%;
    width: 105%;
  }
}