.infooverlay {
  width: 100%;
  position: relative;
  cursor: pointer;
}

.infooverlay:hover .infooverlay-text {
  height: 10%;
}

.infooverlay img {
  display: block;
  width: 100%;
  height: 100%;

}
.infooverlay-text {
  width: 100%;
  height: 5%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left : 0;
  display: flex;
  justify-content: center;
  align-items: center; 
  text-align: center;
  overflow: hidden;
  transition: 0.7s ease;
  color:white;
  font-size: 0.7em;
  padding: 0.5em 0;
}
