.image-container {
    width: 100%;
    position: relative;
    overflow: hidden !important;
}

.image-container img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden !important;
  z-index: 0;
  
}

/* Just styling the content of the div, the *magic* in the previous rules */
.image-container .caption {
  z-index: 1;
  position: relative;
  

}


.image-container-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0.1)40%, rgba(0,0,0,0.8) 70%);
text-shadow: 6px 6px 20px rgba(0,0,0,1);
padding: 50px;
}

@media only screen and (max-width: 640px) {
.image-container-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0.6)10%, rgba(0,0,0,0.8) 70%);
padding: 30px;
}
}