Added ability to add grayscale to cells

2 files changed, 16 insertions, 0 deletions

diff --git a/layouts/partials/cell.html b/layouts/partials/cell.html
index 951c385..5d7c7fb 100644
--- a/layouts/partials/cell.html
+++ b/layouts/partials/cell.html
@@ -2,6 +2,7 @@
     <div class="cell
         fill-container
         no-padding
+        {{ if .grayscale }}grayscale{{ end }}
         {{ if .image }}fullsize-background-image{{ end }}
     " style="
         {{ with .image }}
diff --git a/static/css/main.css b/static/css/main.css
index a829d5f..f0907a1 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -132,6 +132,21 @@ ul.menu li {
     border: 1px solid #FFF;
 }
 
+.grayscale {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+    
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+
+.grayscale:hover {
+    -webkit-filter: grayscale(0%);
+    filter: grayscale(0%);
+}
+
 .clearfix:before,
 .clearfix:after {
     content: ".";