$opacityTransition: opacity 0.8s ease;
.imageContainer {
  display: block;
  position: relative;
  overflow: hidden;
}

.expandIcon {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  color: white;
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.01),
    transparent
  );

  path {
    opacity: 0.8;
  }
  &:hover path {
    opacity: 1;
  }

  display: none;
  .imageContainer:hover & {
    display: block;
  }
}

.pointer {
  cursor: pointer;
}

.imageWrapper {
  overflow: hidden;
}

.image {
  display: block;
  width: 100%;
}

.imageOverlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.imageDescription {
}

.imageTitle {
}

.imageCaption {
  display: block;
  text-align: center;
  padding: 18px 0;
  background: none;
  font-size: 14px;
}

.imagePreload {
  position: relative;
  transition: $opacityTransition;
  filter: blur(8px);
}

.imageHighres {
  position: relative;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  transition: $opacityTransition;

  &.onlyHighRes {
    position: relative;
    opacity: 1;
  }
}

@keyframes image_loading {
  0% {
    width: 5%;
    left: -5%;
  }
  50% {
    width: 50%;
    left: 25%;
  }
  100% {
    width: 5%;
    left: 100%;
  }
}