more website

1 files changed, 50 insertions, 2 deletions

diff --git a/public/product.css b/public/product.css
index 5b718c9..54fe81b 100644
--- a/public/product.css
+++ b/public/product.css
@@ -4,6 +4,54 @@
 	gap: 16px;
 }
 
-.twocolumn .left {
-	text-align: center;
+.twocolumn .left { text-align: center; }
+.twocolumn .left img {
+	max-width: 100%;
+	transition: box-shadow 300ms;
 }
+.twocolumn .left a {
+	transition: transform 300ms;
+}
+
+.twocolumn .left a:hover { transform: scale(103%); }
+.twocolumn .left a:hover img { box-shadow: 0px 7px 40px -17px #0009; }
+
+.twocolumn .left a {
+	position: relative;
+	display: inline-block;
+	line-height: 0;
+}
+
+.twocolumn .left a::after,
+.twocolumn .left img {
+	border-radius: 8px;
+}
+
+.twocolumn .left a::after {
+	content: "Open in nieuw tabblad";
+	font-size: 75%;
+}
+.twocolumn .left a::after {
+	white-space: nowrap;
+	display: block;
+	background-color: var(--bg-alt);
+	color: var(--fg);
+	padding: 8px 12px;
+	position: absolute;
+	bottom: -8px;
+	left: 50%;
+	transform: translate(-50%, 100%) translateY(-10px);
+	line-height: initial;
+	margin-top: 20px;
+	transition-property: opacity, transform;
+	transition-duration: 300ms;
+	opacity: 0;
+}
+
+.twocolumn .left a:hover:after {
+	transform: translate(-50%, 100%) translateY(0px);
+	opacity: 1;
+}
+
+.twocolumn .right h2 { margin-top: 0; }
+