wtc-gallery-component
Version:
Very simplistic gallery with image preloader and a navigation and autoplay option.
2 lines (1 loc) • 1.96 kB
CSS
.gallery{position:relative}.gallery .visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.gallery.is-loading .gallery__wrapper{height:0;opacity:0;overflow:hidden;padding-bottom:50%}.gallery.is-loading .gallery__overlay{opacity:1;pointer-events:auto}.gallery__wrapper{margin:0;padding:0;position:relative;transition:opacity 0.4s ease;width:100%}.gallery__item{display:block;left:0;opacity:0;position:absolute;top:50%;transform:scale(0.9) translateY(-50%);transition:opacity 0.4s ease;width:100%}.gallery__item.is-transitioning{transition:transform 0.6s ease, opacity 0.6s ease}.gallery__item.is-transitioning--backward{opacity:0;transform:translate(-50%, -50%) rotate(-20deg)}.gallery__item.is-transitioning--forward{opacity:0;transform:translate(50%, -50%) rotate(20deg)}.gallery__item.is-active{opacity:1;transform:scale(1) translateY(-50%);z-index:1}.gallery__item.is-active button,.gallery__item.is-active [href],.gallery__item.is-active [tabindex]{visibility:visible}.gallery__item img{display:block;max-width:100%}.gallery__item button,.gallery__item [href],.gallery__item [tabindex]{visibility:hidden}.gallery__overlay{background-color:white;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity 0.4s ease;width:100%}.gallery__overlay::after{animation:galleryPreloader 1s ease infinite;background-color:black;border-radius:50%;content:"";height:40px;left:50%;margin:-20px 0 0 -20px;position:absolute;top:50%;width:40px}.gallery__nav{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(255,255,255,0.7);border:none;border-radius:50%;height:60px;position:absolute;top:50%;transform:translateY(-50%);width:60px}.gallery__nav:hover{cursor:pointer}.gallery__nav-next{right:10px}.gallery__nav-prev{left:10px}@keyframes galleryPreloader{50%{background-color:gray;transform:scaleX(0.1)}100%{transform:scaleX(1) rotate(90deg)}}