.focus-img {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}
.focus-img:hover ~ .hud {
  transition: all 0.2s;
  opacity: 1;
}
.focus-img.smoother {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.focus-img.cursor-arrow {
  cursor: default;
}
.focus-img.cursor-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
.focus-img.cursor-crosshair {
  cursor: crosshair;
}
.hud {
  bottom: 0;
  position: absolute;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 0.25rem 0.75rem;
  opacity: 0;
  transition: all 0.2s;
}
.hud-bottom-left {
  bottom: 0;
  left: 0;
}
.hud-bottom-right {
  bottom: 0;
  right: 0;
}