/*Note: If you are using landscape images use 'background-size:auto 100%;' in .textOverImage and 'background-size:auto 110%;' in .textOverImage:hover*/

a {
  text-decoration: none;
}
/*Add the following compatibility code for IE as you can't animate background-size in IE*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .textOverImage {
    background-size: cover !important;
    
  }
}
.textOverImageContainer {
  width: 33%;
  position: relative;
  float: left;
}

@media (max-width: 768px) {
  .textOverImageContainer {
    width: 50%;
    
  }
}

@media (max-width: 576px) {
  .textOverImageContainer {
    width: 100%;
  }
}
.textOverImageContainer:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.textOverImage {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background-size: 75%;
  background-position: center;
  transition: 0.5s;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 4px #000;
}

.textOverImage:hover {
  background-size: 70%;
}

.textOverImage:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(
    90%
  ); /*use transform:translateY(100%); to remove footer*/
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 0 8px;
  content: attr(data-title);
  transition: 0.5s 0.1s;
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
}

.textOverImage:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding: 8px;
  content: attr(data-text);
  transition: 0.5s;
  padding-top: 2em;
  margin-top: 8px;
  transform: translateY(100%);
  opacity: 0;
}

.textOverImage:hover:after {
  transform: translateY(0);
  transition: 0.5s 0.1s;
  opacity: 1;
}
.textOverImage:hover:before {
  transform: translateY(0);
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 0.5s;
}