gallery

gallery/gallery.css

@@ -0,0 +1,87 @@
+#imageGallery {
+	margin-top: 2rem;
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
+	grid-auto-rows: min-content;
+	grid-gap: 1rem;
+	justify-items: center;
+	align-items: center;
+}
+
+
+
+.galleryCard {
+	/*margin: 1rem;*/
+	cursor: pointer;
+	width: 375px;
+	height: 525px;
+	transition: 2s;
+	text-align: center;
+}
+.galleryCard > img {
+	z-index: 1;
+}
+.galleryCard > div {
+	position: relative;
+	top: -2rem;
+	left: 0;
+	z-index: -1;
+}
+
+
+
+.galleryHidden {
+	opacity: 0;
+}
+.galleryVisible {
+	opacity: 1;
+}
+
+
+
+.filterHidden {
+	display: none;
+}
+
+
+
+#fullImageViewbox {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	backdrop-filter: brightness(40%) blur(8px);
+	-webkit-backdrop-filter: brightness(40%) blur(8px);
+	text-align: center;
+	cursor: pointer;
+}
+#fullImageViewbox.visible {
+	display: block;
+}
+#fullImageViewbox > img {
+	margin: 1rem;
+	height: calc(100% - 2rem);
+	width: auto;
+	cursor: default;
+	animation-duration: 0.5s;
+}
+#fullImageViewbox.visible > img.visible {
+	animation-name: previewIn;
+}
+#fullImageViewbox.visible > img:not(.visible) {
+	animation-name: previewOut;
+	position: relative; top: 100vh;
+	animation-duration: 0.3s;
+}
+
+@keyframes previewIn {
+	from {position: relative; top: 100vh;}
+	to {position: relative; top: 0;}
+}
+@keyframes previewOut {
+	from {position: relative; top: 0;}
+	to {position: relative; top: 100vh;}
+}