.frame {
  position: relative;
  float: left;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid white;
  width: 100%;
  font-family: sans-serif;
}
/* square aspect ratio */
.frame::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.frame figure {
  margin: 0;
}
/* figure overlay */
.frame figure::before {
  content: '';
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translate(-50%, -50%) scale(0.95);
          transform: translate(-50%, -50%) scale(0.95);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  /* remove image border for IE */
  border: 0;
}

.frame figcaption {
  position: absolute;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  padding: 0.625rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.66);
  /* IE bug: can't use calc() in translateY... */
  /* ...so two translates below are the same as: */
  /* translateY(calc(100% - 2.125rem)) */
  -webkit-transform: translateY(100%) translateY(-2.125rem);
          transform: translateY(100%) translateY(-2.125rem);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.frame p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.125;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.frame .caption-primary {
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.frame .caption-secondary {
  margin-top: 2rem;
  font-style: italic;
  -webkit-transition: margin-top 0.3s ease;
  transition: margin-top 0.3s ease;
}

/* --- hover/focus interaction --- */
/* fade in overlay */
.frame:hover figure::before,
.frame:focus figure::before {
  opacity: 0.5;
}
/* zoom in image */
.frame:hover img,
.frame:focus img {
  -webkit-transform: translate(-50%, -50%) scale(1.0);
          transform: translate(-50%, -50%) scale(1.0);
}
/* slide up and lighten figcaption */
.frame:hover figcaption,
.frame:focus figcaption {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
/* reset text overflow/wrap */
.frame:hover .caption-primary,
.frame:focus .caption-primary {
  overflow: visible;
  white-space: normal;
}
/* slide up secondary caption */
.frame:hover .caption-secondary,
.frame:focus .caption-secondary {
  margin-top: 0.25rem;
}