From c311736fb2476118650b766f75ecea20b27c644b Mon Sep 17 00:00:00 2001
From: Cobular <22972550+Cobular@users.noreply.github.com>
Date: Tue, 21 Apr 2020 21:53:51 -0700
Subject: [PATCH] Fade works, but it's a bit buggy because jquery bad

---
 css/masonry.css   |  4 +---
 index.html        |  2 +-
 sass/masonry.sass | 25 ++++++++++++++++++++++---
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/css/masonry.css b/css/masonry.css
index fd825a9..2252384 100644
--- a/css/masonry.css
+++ b/css/masonry.css
@@ -4,7 +4,7 @@
   padding: 5px;
   box-sizing: border-box;
   height: 200px;
-  transition: 0.22s all; }
+  transition: 0.22s ease-in-out; }
 
 .grid {
   margin: 0 auto;
@@ -35,7 +35,5 @@
 .grid:hover .grid-item:hover {
   filter: blur(0px);
   opacity: 1; }
-  .grid:hover .grid-item:hover > img {
-    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25)); }
 
 /*# sourceMappingURL=masonry.css.map */
diff --git a/index.html b/index.html
index 4e1beb3..7c01fe4 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
         </div>
         <!--CodeDay-->
         <div class="grid-item grid-item--image">
-            <img src="images/codedaysd.png" alt="CodeDay SD Logo" width="230" height="230">
+            <img class="grid-img" src="images/codedaysd.png" alt="CodeDay SD Logo" width="230" height="230">
         </div>
         <!--SRND-->
         <div class="grid-item">
diff --git a/sass/masonry.sass b/sass/masonry.sass
index 34cf0bc..33bad82 100644
--- a/sass/masonry.sass
+++ b/sass/masonry.sass
@@ -8,7 +8,7 @@
   box-sizing: border-box
   height: 200px
   //box-shadow: 0 2px 3px 0px rgba(0,0,0,0.25)
-  transition: 0.22s all
+  transition: 0.22s ease-in-out
 
 
 .grid
@@ -46,5 +46,24 @@
   opacity: 1
   //box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
 
-  > img
-    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.25))
+//.grid-img
+//  display: inline-block
+//  position: relative
+//  width: 230px
+//  height: 230px
+//
+//.grid-img:after
+//  content: ""
+//  position: absolute
+//  z-index: -1
+//  top: 0
+//  left: 0
+//  width: 100%
+//  height: 100%
+//  opacity: 0
+//  filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.125))
+//  transition: opacity 0.3s ease-in-out
+//
+///* Transition to showing the bigger shadow on hover */
+//.grid-img:hover:after
+//  opacity: 1