#container {
    position: relative;
  }

.overcolor{
  position: relative;
}

.overcolor .text{
    color: white;
    font-size: 2rem;
    font-weight: bolder;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    /* transition: .5s ease; */
}

.overcolor #image{
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
}
.overcolor:hover #image{
 opacity: .25;
}

@media screen and (max-width: 900px) {
   
  .overcolor .text{

    font-size: 1rem;
      
  }

}