.figure-hover {
  display: inline-flex;
  position: relative;

  &:hover {
    figcaption {
      opacity: 1;
      visibility: visible;
    }
  }

  img {
    max-width: 100%;
  }

  figcaption {
    color: #fff;
    cursor: default;
    background: rgba(78,90,101,.8);
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 1rem;
    position: absolute;
    text-align: center;
    transition-property: opacity,
                         visibility;
    transition: var(--transitions);
    visibility: hidden;
    width: 100%;
  }
}