From ece64d0aa9bf0ef3aac570bf8ee0a5ab9ef752c8 Mon Sep 17 00:00:00 2001
From: mattkae <mattkae@protonmail.com>
Date: Fri, 26 Nov 2021 15:50:57 -0500
Subject: (mkosarek) Expandable pictures

---
 index.css | 36 ++++++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

(limited to 'index.css')

diff --git a/index.css b/index.css
index a77f5d1..ba2fe55 100644
--- a/index.css
+++ b/index.css
@@ -110,12 +110,23 @@ section a:hover {
     transition: transform 50ms linear;
 }
 
-.carousel_image {
+#image_container .carousel_image {
     width: 240px;
     transition: opacity 50ms linear;
     padding: 0;
     margin: 0;
     padding-right: 12px;
+    cursor: pointer;
+    position: relative;
+}
+
+#image_container .carousel_image:hover::after {
+    position: absolute;
+    top: calc(50% - 6rem);
+    left: calc(50% - 3rem);
+    font-size: 6rem;
+    color: white;
+    content: "\26F6";
 }
 
 .carousel_image > figcaption {
@@ -124,10 +135,27 @@ section a:hover {
 }
 
 .carousel_image > img {
-    width: 240px;
+    width: inherit;
     border-radius: 2px;
 }
 
+.carousel_image_expanded_container {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.carousel_image_expanded_container > .carousel_image {
+    width: 35vw;
+    opacity: 1.0 !important;
+}
+
 input {
     outline: none;
     border: 1px solid transparent;
@@ -212,4 +240,8 @@ only screen and (max-width:1280px) {
     header > h1 {
         font-size: 1.5rem;
     }
+
+    .carousel_image_expanded_container > .carousel_image {
+        width: 100vw;
+    }
 }
-- 
cgit v1.2.1