#aaa {box-sizing: border-box;}

.aaacontainer {
  position: relative;
  width: 100%;
  max-width: 375px;
  z-index: 100;
}

.aaacontainer_muted {
  opacity: .60;
}
.aaaimage {
  display: block;
  width: 100%;
  height: auto;
}
 
.aaaoverlay_text {
  position: absolute; 
  top: 0; 
  height:100%;
  color: #666; 
  /* background-color: orange; */
  width: 80%;
  max-width:375px !important;
  transition: .5s ease;
  opacity:0;
  font-size: 1em;
  text-align: center;
}

.aaacontainer:hover .aaaoverlay_text {
  opacity: 1;
}

.aaaoverlay_arrow {
  position: absolute; 
  bottom: 0; 
  height:20px;
  color: #f1f1f1; 
  width: 100%;
  max-width:375px !important;
  transition: .5s ease;
  opacity:0;
  margin-left: 21px; /* when we stretched image arrow was no longer same width as tile so it wasnt centered properly;  */
  padding: 0 0 25px 0px; ;
  text-align: center;
  z-index: 2200;
}


.aaacontainer:hover .aaaoverlay_arrow {
  opacity: 1;
}