From 695cec1dac9ee45a82c570981288592ab2540455 Mon Sep 17 00:00:00 2001
From: Cobular <22972550+Cobular@users.noreply.github.com>
Date: Mon, 15 Jun 2020 21:58:00 -0700
Subject: [PATCH] Switched to clip planes, much better!

---
 css/masonry.css   | 34 +++++++++++++++-------------------
 sass/masonry.sass | 45 +++++++++++++++++++++------------------------
 2 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/css/masonry.css b/css/masonry.css
index 999d511..7429699 100644
--- a/css/masonry.css
+++ b/css/masonry.css
@@ -15,47 +15,43 @@
   width: 90%;
   position: absolute;
   z-index: 1;
-  top: 68%;
-  padding: 15px 20px;
+  top: 71%;
+  padding: 10px 15px;
   transition: 0.2s ease; }
   .service-wrapper-inner p {
     color: #e7e7e7; }
   .service-wrapper-inner.notitle {
     width: 60%;
-    top: 70%; }
+    top: 76%; }
 
 .service-overlay {
   background-color: rgba(32, 32, 32, 0.4);
   width: 120%;
   height: 120%;
   position: absolute;
-  top: 80%;
+  top: 68%;
   left: -28px;
   z-index: 0;
   transition: 0.2s ease; }
   .service-overlay.notitle {
-    -webkit-transform: rotate(35deg);
-    -moz-transform: rotate(35deg);
-    -ms-transform: rotate(35deg);
-    -o-transform: rotate(35deg);
-    left: -65%;
-    height: 300%; }
+    clip-path: polygon(0 0, 100% calc(100% - 2vw), 100% 100%, 0 100%);
+    height: 200%; }
   .service-overlay.title {
-    -webkit-transform: rotate(10deg);
-    -moz-transform: rotate(10deg);
-    -ms-transform: rotate(10deg);
-    -o-transform: rotate(10deg); }
+    clip-path: polygon(0 0, 100% calc(100% - 18.5vw), 100% 100%, 0 100%); }
 
 .grid-item:hover .service-wrapper-inner {
   top: -10%;
-  padding: 20px 20px; }
+  padding: 15px 15px; }
   .grid-item:hover .service-wrapper-inner.notitle {
-    padding: 15px 20px; }
+    padding: 10px 15px; }
 .grid-item:hover .service-overlay {
-  top: -10%;
   background-color: rgba(32, 32, 32, 0.8); }
+  .grid-item:hover .service-overlay.title {
+    top: -10%;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
   .grid-item:hover .service-overlay.notitle {
     top: -20%;
+    clip-path: polygon(0 0, calc(100% - 15vw) 0, 100% 100%, 0 100%);
     left: -20%; }
 
 .grid {
@@ -80,8 +76,8 @@
   .grid-item--width2 {
     width: 100%; } }
 .blur-me {
-  filter: grayscale(15%) blur(0.5px) brightness(100%);
-  opacity: 0.8;
+  filter: grayscale(0%) blur(0.5px) brightness(100%);
+  opacity: 1;
   box-shadow: none; }
 
 .unblur-me {
diff --git a/sass/masonry.sass b/sass/masonry.sass
index 4606eba..4e3d863 100644
--- a/sass/masonry.sass
+++ b/sass/masonry.sass
@@ -21,56 +21,53 @@
   width: 90%
   position: absolute
   z-index: 1
-  top: 68%
-  padding: 15px 20px
+  top: 71%
+  padding: 10px 15px
   transition: 0.2s ease
+
   p
     color: #e7e7e7
 
   &.notitle
     width: 60%
-    top: 70%
+    top: 76%
 
 .service-overlay
-  background-color: rgba(32,32,32,0.4)
+  background-color: rgba(32, 32, 32, 0.4)
   width: 120%
   height: 120%
   position: absolute
-  top: 80%
+  top: 68%
   left: -28px
   z-index: 0
   transition: 0.2s ease
 
   &.notitle
-    -webkit-transform: rotate(35deg)
-    -moz-transform: rotate(35deg)
-    -ms-transform: rotate(35deg)
-    -o-transform: rotate(35deg)
-    left: -65%
-    height: 300%
+    clip-path: polygon(0 0, 100% calc(100% - 2vw), 100% 100%, 0 100%)
+    height: 200%
 
   &.title
-    -webkit-transform: rotate(10deg)
-    -moz-transform: rotate(10deg)
-    -ms-transform: rotate(10deg)
-    -o-transform: rotate(10deg)
-
+    clip-path: polygon(0 0, 100% calc(100% - 18.5vw), 100% 100%, 0 100%)
 
 
 .grid-item:hover
   .service-wrapper-inner
     top: -10%
-    padding: 20px 20px
+    padding: 15px 15px
 
     &.notitle
-      padding: 15px 20px
+      padding: 10px 15px
 
   .service-overlay
-    top: -10%
-    background-color: rgba(32,32,32,0.8)
+    background-color: rgba(32, 32, 32, 0.8)
+
+    &.title
+      top: -10%
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
 
     &.notitle
       top: -20%
+      clip-path: polygon(0 0, calc(100% - 15vw) 0, 100% 100%, 0 100%)
       left: -20%
 
 
@@ -99,8 +96,8 @@
 
 
 .blur-me
-  filter: grayscale(15%) blur(0.5px) brightness(100%)
-  opacity: .8
+  filter: grayscale(0%) blur(0.5px) brightness(100%)
+  opacity: 1
   //transform: scale(.995)
   box-shadow: none
 
@@ -114,8 +111,8 @@
 .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))
+//box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
+//filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3))
 
 
 //.grid-img