Fixed fade animations, actually looks pretty damn good right now

css/main.css

@@ -44,7 +44,8 @@
   height: fit-content;
   padding: 10px;
   margin-top: 10px;
-  font-family: "Montserrat", sans-serif; }
+  font-family: "Montserrat", sans-serif;
+  border-radius: 3px; }
 
 @media (min-width: 992px) {
   .page {

css/masonry.css

@@ -1,4 +1,6 @@
 .grid-item {
+  background-color: #eaeaea;
+  border-radius: 3px;
   width: 240px;
   margin-bottom: 10px;
   padding: 5px;
@@ -28,16 +30,16 @@
   .grid-item--width2 {
     width: 100%; } }
 .blur-me {
-  animation: FadeOut 0.22s;
-  animation-fill-mode: both; }
-
-@keyframes FadeOut {
-  to {
-    opacity: 0.8;
-    filter: grayscale(20%) blur(0.7px) brightness(94%); } }
-@keyframes FadeIn {
-  to {
-    opacity: 1;
-    filter: grayscale(0%) blur(0px) brightness(100%); } }
+  filter: grayscale(10%) blur(0.5px) brightness(100%);
+  opacity: 0.8;
+  box-shadow: none; }
+
+.unblur-me {
+  filter: grayscale(0%) blur(0px) brightness(100%);
+  opacity: 1;
+  box-shadow: none; }
+
+.grid:hover .grid-item:hover {
+  opacity: 1; }
 
 /*# sourceMappingURL=masonry.css.map */

index.html

@@ -24,7 +24,8 @@
     <div class="grid">
         <!--Distest-->
         <div class="grid-item grid-item--tall4">
-            Distest
+            Distest <br>
+            One of my favorite Python projects, my attempt at implementing a test suite for discord bots.
         </div>
         <!--CodeDay-->
         <div class="grid-item grid-item--image">
@@ -54,9 +55,11 @@
     $(".grid-item").hover(
         function () {
             $(this).siblings().addClass('blur-me')
+            $(this).siblings().removeClass('unblur-me')
         },
         function () {
             $(this).siblings().removeClass('blur-me')
+            $(this).siblings().addClass('unblur-me')
         }
     )
 </script>

notes.txt

@@ -1,18 +1 @@
-http://www.alexafalcone.com/
-http://gudh.github.io/ihover/dist/index.html#circle10
-http://gudh.github.io/ihover/dist/index.html#circle13
-http://gudh.github.io/ihover/dist/index.html#circle17
-http://gudh.github.io/ihover/dist/index.html#square3
-http://gudh.github.io/ihover/dist/index.html#square6
-http://gudh.github.io/ihover/dist/index.html#square12
-https://codepen.io/honglio/pen/FKyxG
-https://codepen.io/russpate/pen/qRaepv --- Requires the whole area to be blurred
-https://codepen.io/Mamboleoo/pen/XgBvrJ ---
-https://codepen.io/cassidoo/pen/RZOWQb
-https://codepen.io/Sherpa23/pen/rKvJXg !!
-https://codepen.io/markmead/pen/MqmOVB !!
-https://codepen.io/ViktorKorolyuk/pen/GYGwpv
-https://ianlunn.github.io/Hover/ (border section)
-https://codepen.io/bhautikbharadava/full/OdPzdW (gives borders too)
-https://tympanus.net/Development/ProximityFeedback/index5.html
-https://tympanus.net/Development/ProximityFeedback/index7.html (scroll icon)
+https://codepen.io/exah/pen/Lqyem - Consider doing a fun border and having that change on hover

sass/main.sass

@@ -49,9 +49,12 @@
   padding: 10px
   margin-top: 10px
   font-family: 'Montserrat', sans-serif
+  border-radius: 3px
+
 
 @include respond-above(md)
   .page
     width: 80%
     margin: 10px auto auto
 
+

sass/masonry.sass

@@ -1,7 +1,8 @@
 @import "breakpoint-helpers"
 
 .grid-item
-  //background-color: coral
+  background-color: #eaeaea
+  border-radius: 3px
   width: 240px
   margin-bottom: 10px
   padding: 5px
@@ -37,30 +38,24 @@
 
 
 .blur-me
-  animation: FadeOut 0.22s
-  animation-fill-mode: both
+  filter: grayscale(10%) blur(0.5px) brightness(100%)
+  opacity: .8
+  //transform: scale(.995)
+  box-shadow: none
 
-@keyframes FadeOut
-  to
-    opacity: 0.8
-    filter: grayscale(20%) blur(0.7px) brightness(94%)
 
-@keyframes FadeIn
-  to
-    opacity: 1
-    filter: grayscale(0%) blur(0px) brightness(100%)
+.unblur-me
+  filter: grayscale(0%) blur(0px) brightness(100%)
+  opacity: 1
+  //transform: scale(.995)
+  box-shadow: none
 
+.grid:hover .grid-item:hover
+  //transform: scale(1.005)
+  opacity: 1
+  //box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
+  //filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3))
 
-//  filter:
-//  opacity: .8
-//  //transform: scale(.995)
-//  box-shadow: none
-//
-//.grid:hover .grid-item:hover
-//  //transform: scale(1.005)
-//  filter: blur(0px)
-//  opacity: 1
-//  //box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
 
 //.grid-img
 //  display: inline-block