Fade works, but it's a bit buggy because jquery bad

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 */

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">

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
+//.grid-img
-    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.25))
+//  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