[class*=#{$imghv-selector}-flip] {
  perspective: 70rem;

  &:hover img {
    transform: scale(1.1);
  }

  figcaption {
    z-index: 1;
  }

  &:not(:hover) figcaption {
    opacity: 0;
  }
}

.#{$imghv-selector}-flip {
  &-up {
    figcaption {
      transform-origin: top;
    }

    &:not(:hover) figcaption {
      transform: rotateX(-80deg);
    }
  }

  &-left {
    figcaption {
      transform-origin: left;
    }

    &:not(:hover) figcaption {
      transform: rotateY(80deg);
    }
  }

  &-right {
    figcaption {
      transform-origin: right;
    }

    &:not(:hover) figcaption {
      transform: rotateY(-80deg);
    }
  }

  &-down {
    figcaption {
      transform-origin: bottom;
    }

    &:not(:hover) figcaption {
      transform: rotateX(80deg);
    }
  }

  &-x {
    overflow: initial;

    &:hover {
      img {
        transform: rotateX(-180deg);
        opacity: 0;
      }
      figcaption {
        transition-delay: ($imghv-duration * 0.4);
      }
    }

    &:not(:hover) {
      img {
        transition-delay: ($imghv-duration * 0.4);
      }
      figcaption {
        transform: rotateX(90deg);
      }
    }
  }

  &-y {
    overflow: initial;

    &:hover {
      img {
        transform: rotateY(-180deg);
        opacity: 0;
      }
      figcaption {
        transition-delay: ($imghv-duration * 0.4);
      }
    }

    &:not(:hover) {
      img {
        transition-delay: ($imghv-duration * 0.4);
      }
      figcaption {
        transform: rotateY(90deg);
      }
    }
  }


  &-xy {
    overflow: initial;

    &:hover {
      img {
        transform: rotate3d(1, -1, 0, 100deg);
        opacity: 0;
      }
      figcaption {
        transition-delay: ($imghv-duration * 0.4);
      }
    }

    &:not(:hover) {
      img {
        transition-delay: ($imghv-duration * 0.4);
      }
      figcaption {
        transform: rotate3d(-1, 1, 0, 100deg);
      }
    }
  }
}