e-gallery.css (3762B)
1 /*! E-Gallery v1.2.0 by Elementor */ 2 .e-gallery-container { 3 position: relative; 4 display: flex; 5 flex-wrap: wrap; } 6 .e-gallery-container:not(.e-gallery-grid) { 7 transition: padding-bottom var(--animation-duration); } 8 9 .e-gallery-item { 10 position: relative; 11 flex-grow: 0; 12 flex-shrink: 0; 13 transition-property: all; 14 transition-duration: var(--animation-duration); } 15 .e-gallery-item:not(:hover) .e-gallery-overlay { 16 display: none; } 17 .e-gallery-item.e-gallery-item--hidden { 18 transform: scale3d(0, 0, 0); 19 opacity: 0; } 20 21 .e-gallery-image { 22 background-position: center center; 23 background-size: cover; 24 width: 100%; 25 transform-origin: center top; 26 transition: var(--animation-duration); } 27 28 .e-gallery-overlay { 29 position: absolute; 30 top: 0; 31 bottom: 0; 32 left: 0; 33 right: 0; 34 display: flex; 35 align-items: center; 36 justify-content: space-evenly; 37 flex-wrap: wrap; 38 flex-direction: column; 39 color: #fff; 40 background-color: rgba(0, 0, 0, 0.5); } 41 .e-gallery-overlay__title { 42 font-size: 24px; } 43 44 .e-gallery-grid:not(.e-gallery--animated) { 45 display: grid; 46 grid-gap: var(--vgap) var(--hgap); 47 grid-template-columns: repeat(var(--columns), 1fr); } 48 .e-gallery-grid:not(.e-gallery--animated) .e-gallery-item--hidden { 49 position: absolute; } 50 51 .e-gallery-grid.e-gallery--animated { 52 padding-bottom: var(--container-aspect-ratio); } 53 .e-gallery-grid.e-gallery--animated .e-gallery-item { 54 --item-width: calc((100% - ((var(--columns) - 1) * var(--hgap))) / var(--columns)); 55 position: absolute; 56 top: calc(((100% / var(--rows)) + (var(--vgap) / var(--rows))) * var(--row)); 57 width: var(--item-width); } 58 59 .e-gallery-grid .e-gallery-image { 60 padding-bottom: var(--aspect-ratio); } 61 62 .e-gallery-justified { 63 padding-bottom: calc(var(--container-aspect-ratio) * 100%); } 64 .e-gallery-justified .e-gallery-item { 65 position: absolute; 66 width: calc(var(--item-width) * (100% - var(--hgap) * var(--gap-count))); 67 height: var(--item-height); 68 top: calc(var(--item-top) + (var(--row) * var(--vgap))); } 69 .e-gallery-justified .e-gallery-image { 70 height: 100%; } 71 72 .e-gallery-masonry { 73 height: 0; 74 margin-bottom: calc(var(--highest-column-gap-count) * var(--vgap)); } 75 .e-gallery-masonry .e-gallery-item { 76 position: absolute; 77 width: calc(100% / var(--columns) - (var(--hgap) * (var(--columns) - 1) / var(--columns))); 78 top: calc(var(--percent-height) + (var(--items-in-column) * var(--vgap))); } 79 .e-gallery-masonry .e-gallery-image { 80 padding-bottom: var(--item-height); } 81 82 .e-gallery--ltr.e-gallery-grid.e-gallery--animated .e-gallery-item { 83 left: calc(var(--item-width) * var(--column) + (var(--hgap) * var(--column))); } 84 85 .e-gallery--ltr.e-gallery-justified .e-gallery-item { 86 left: calc(var(--item-start) * (100% - var(--hgap) * var(--gap-count)) + var(--hgap) * var(--item-row-index)); } 87 88 .e-gallery--ltr.e-gallery-masonry .e-gallery-item { 89 left: calc((100% / var(--columns) - (var(--hgap) * (var(--columns) - 1) / var(--columns))) * var(--column) + (var(--hgap) * var(--column))); } 90 91 .e-gallery--rtl.e-gallery-grid.e-gallery--animated .e-gallery-item { 92 right: calc(var(--item-width) * var(--column) + (var(--hgap) * var(--column))); } 93 94 .e-gallery--rtl.e-gallery-justified .e-gallery-item { 95 right: calc(var(--item-start) * (100% - var(--hgap) * var(--gap-count)) + var(--hgap) * var(--item-row-index)); } 96 97 .e-gallery--rtl.e-gallery-masonry .e-gallery-item { 98 right: calc((100% / var(--columns) - (var(--hgap) * (var(--columns) - 1) / var(--columns))) * var(--column) + (var(--hgap) * var(--column))); } 99 100 .e-gallery--lazyload .e-gallery-image:not(.e-gallery-image-loaded) { 101 filter: opacity(0); 102 transform: scale(0.5); } 103 104 105 /*# sourceMappingURL=e-gallery.css.map*/