body{ position: absolute; width: 100vw; height: 100vh; padding: 0; margin: 0; } #slideshow{ position: relative; background-color: lightgrey; height: 100%; *{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } &:hover{ &::before{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 10; content: "Click to expand"; color: white; background-color: rgba(black, 0.5); } } &.fullscreen{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: none; &:before{ display:none; } #slides{ height: 100vh; } } #slides{ position: relative; height: 100%; overflow: hidden; .slide{ position: absolute; width: 100%; height: 100%; display: inline-flex; justify-content: center; top: 0px; background-color: grey; transition: left 1s ease-out; img{ max-width: 100%; max-height: 100%; } } .slide.left{ left: -100%; } .slide.center{ left: 0px; } .slide.right{ left: 100%; transition: none; } } #progress_bullets{ position: absolute; bottom: 10px; width: 100%; height: 10px; display: flex; justify-content: center; margin-bottom: 10px; .bullet{ height: 10px; width: 10px; margin-left: 5px; margin-right: 5px; border-radius: 50%; background-color: grey; &.active{ background-color: #c99836; } } } #progress_bar{ position: absolute; bottom: 0px; height: 10px; background-color: #304c83; &.init{ width: 0px; transition: none; } &.progress{ width: 100%; transition: width 10s linear; } } }