Start position

With custom HTML inside the main div and a start position. You can use your own HTML inside, it will not be overwritten (see example below). startPos is set to 25 (percent from left).

AUSTRIA

Krimml waterfalls

Krimml waterfalls (color grading)

Styling used for the 'info box'.

INFO

If you want the info-box-wrapper to appear in the foreground (above the slider-handle), just use a higher z-index on that element.

.info-box-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.info-box {
  background-color: rgba(200, 200, 200, 0.85);
  display: flex;
  flex-direction: column;
  padding: 1.5em 2em;
  color: #1a4a41;
  box-shadow: 0px 3px 10px -2px rgb(0 8 4 / 40%);
}

.info-box h1,
.info-box p {
  margin: 0;
}