diff options
Diffstat (limited to 'src/scss/components/_image-gallery.scss')
| -rwxr-xr-x | src/scss/components/_image-gallery.scss | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/src/scss/components/_image-gallery.scss b/src/scss/components/_image-gallery.scss new file mode 100755 index 0000000..10a067a --- /dev/null +++ b/src/scss/components/_image-gallery.scss @@ -0,0 +1,78 @@ +.image-gallery { + display: block; + position: relative; + height: auto; + overflow: hidden; + margin-bottom: 30px; + + .image-gallery-metabar { + position: absolute; + bottom: 0; + // width: (full with) - ((padding right-left of `.image-gallery-metabar` + 0.05em) * 4) to be responsive on all screen + width: calc(100% - (1.5em) * 2); + font-family: map-get($font-families, 'image-gallery'); + font-style: italic; + background: rgba(0, 0, 0, 0.75); + font-size: map-get($font-size, small); + color: white; + padding: 0.5em 1.5em; + // Use to go over all images of the gallery + z-index: 1; + } + .image-gallery-photos { + .photo-box { + float: left; + position: relative; + overflow: hidden; + display: none; + + &:first-child { + display: block; + width: 100%; + // 16:9 ratio, consider as height value + padding-bottom: 56.25%; + } + .photo-box-inner { + position: absolute; + overflow: hidden; + + .photo { + width: 100%; + cursor: -webkit-zoom-in; + cursor: -moz-zoom-in; + } + } + } + } + // Thumbnail image of gallery + // Used when image gallery contains more than 2 images + // You can change the style of image gallery by changing the following value + // Currently, it display one large image above 2 smaller images + // First image of the gallery + .image-gallery-photos--thumbnail { + // Display all images + .photo-box { + display: block; + width: 50%; + // Consider as height value + padding-bottom: 30%; + // Display First image in large + &:first-child { + width: 100%; + // Consider as height value + padding-bottom: 40%; + margin-bottom: $image-gallery-photos-margin; + } + // Resize seconde image minus space between 2 images + &:nth-child(2) { + margin-right: $image-gallery-photos-margin; + // width: 50% minus the space between 2 images + width: calc(50% - #{$image-gallery-photos-margin}); // Consider as height value + } + // Hide all other images after the 3 first + &:nth-child(n + 4) { + display: none; + } + } + } +}
\ No newline at end of file |