primitive gallery on indexpage

2022-12-12 12:09:02 +01:00
parent 931ed19f7f
commit 641ff29d44
4 changed files with 109 additions and 0 deletions
--- a/components/IndexGallery/IndexGallery.module.scss
+++ b/components/IndexGallery/IndexGallery.module.scss
@@ -0,0 +1,55 @@
+.gallerycontainer {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	@media screen and (max-width: 800px) {
+		flex-direction: column;
+		align-items: center;
+	}
+	gap: 1.5rem;
+	.galleryimg {
+		position: relative;
+		@media screen and (max-width: 800px) {
+			text-decoration: none;
+		}
+		img {
+			max-height: 18rem;
+			border-radius: 8px;
+			@media screen and (max-width: 800px) {
+				max-width: 250px;
+			}
+		}
+		article {
+			position: absolute;
+			backdrop-filter: blur(8px);
+			background: rgba(#fff, 0.4);
+			color: var(--backdrop);
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: baseline;
+			justify-content: space-between;
+			padding: 0.25rem 0.5rem;
+			border-radius: 8px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			transition-duration: 100ms;
+			opacity: 0;
+			@media screen and (max-width: 800px) {
+				display: block;
+				position: unset;
+				background: unset;
+				color: var(--white0);
+				padding: 0;
+				opacity: 1;
+			}
+		}
+		&:hover {
+			article {
+				opacity: 1;
+			}
+		}
+	}
+}