.exifcontainer {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5em;
  border-radius: 0.5em;
}

.exifimage {
  display: block;
  width: 100%;
  height: auto;
}

img.exifimage { margin-bottom: 0; }

.exifoverlay {
  position: absolute;
  align-items: right;
  top: 0;
  bottom: 0;
  left: 100%;
  height: 100%;
  width: 30%;
  transition: .25s cubic-bezier(0.37, 0.03, 0, 0.99);
  background-color: #000000;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  margin-bottom: 1.5em;
  opacity: 0.5;
}

.exifcontainer:hover .exifoverlay, .exifcontainer:active .exifoverlay {
  left: 70.5%;
}

.exifcontainer:hover .exifmap, .exifcontainer:active .exifmap {
  left: 1vw;
}

.exiftext {
  color: white;
  font-size: 2.5vw;
  position: relative;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
}

@media screen and (min-width: 750px) {
  .exiftext { font-size: 1.2em; }
}

.exiftext p {
  margin: 0;
  padding: 1.8vw 0;
}

div.exifmap{
  position: absolute;
  transition: .25s cubic-bezier(0.37, 0.03, 0, 0.99);
  border-radius: 0.5em;
  left: -28%;
  bottom: 1vw;
  width: 27%;
  height: 27%
}