From 54c1a537354fc18e9f701de2a60f36719c30d3a0 Mon Sep 17 00:00:00 2001
From: Laurent Peuch <cortex@worlddomination.be>
Date: Fri, 4 Dec 2015 13:25:56 +0100
Subject: [PATCH] [enh] on hover gallery image, darken everything

---
 materialize/css/style.css |  4 +++
 templates/example.html    | 52 +++++++++++++++++++++------------------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/materialize/css/style.css b/materialize/css/style.css
index 0696bc7..4f7c46e 100644
--- a/materialize/css/style.css
+++ b/materialize/css/style.css
@@ -36,6 +36,10 @@ body {
     height: 100%;
 }
 
+.gallery-square > a:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
 .gallery-cover {
     position: absolute;
     top: 0px;
diff --git a/templates/example.html b/templates/example.html
index 425404f..0b36b5e 100644
--- a/templates/example.html
+++ b/templates/example.html
@@ -20,42 +20,46 @@
   <div class="galleries-grid">
       <div class="galleries-line">
           <div class="gallery-square">
-              <a href="#"></a>
-              <div class="gallery-title">
-                  <h2>First Gallery Title</h2>
-                  <h3>Sub gallery title</h3>
-                  <div class="gallery-datetime">3 march 2015</div>
-              </div>
+              <a href="#">
+                  <div class="gallery-title">
+                      <h2>First Gallery Title</h2>
+                      <h3>Sub gallery title</h3>
+                      <div class="gallery-datetime">3 march 2015</div>
+                  </div>
+              </a>
               <div class="gallery-cover" style="background-image: url('./1.png');"></div>
           </div>
           <div class="gallery-square">
-              <a href="#"></a>
-              <div class="gallery-title">
-                  <h2>Second Gallery Title</h2>
-                  <h3>Sub gallery title</h3>
-                  <div class="gallery-datetime">3 march 2015</div>
-              </div>
+              <a href="#">
+                  <div class="gallery-title">
+                      <h2>Second Gallery Title</h2>
+                      <h3>Sub gallery title</h3>
+                      <div class="gallery-datetime">3 march 2015</div>
+                  </div>
+              </a>
               <div class="gallery-cover" style="background-image: url('./1.png');"></div>
           </div>
       </div>
 
       <div class="galleries-line">
           <div class="gallery-square">
-              <a href="#"></a>
-              <div class="gallery-title">
-                  <h2>First Gallery Title</h2>
-                  <h3>Sub gallery title</h3>
-                  <div class="gallery-datetime">3 march 2015</div>
-              </div>
+              <a href="#">
+                  <div class="gallery-title">
+                      <h2>First Gallery Title</h2>
+                      <h3>Sub gallery title</h3>
+                      <div class="gallery-datetime">3 march 2015</div>
+                  </div>
+              </a>
               <div class="gallery-cover" style="background-image: url('./1.png');"></div>
           </div>
           <div class="gallery-square">
-              <a href="#"></a>
-              <div class="gallery-title">
-                  <h2>Second Gallery Title</h2>
-                  <h3>Sub gallery title</h3>
-                  <div class="gallery-datetime">3 march 2015</div>
-              </div>
+              <a href="#">
+                  <div class="gallery-title">
+                      <h2>Second Gallery Title</h2>
+                      <h3>Sub gallery title</h3>
+                      <div class="gallery-datetime">3 march 2015</div>
+                  </div>
+              </a>
               <div class="gallery-cover" style="background-image: url('./1.png');"></div>
           </div>
       </div>