From 7f5a55a18422e7b1fcfb4e5011fbc097d1499fd8 Mon Sep 17 00:00:00 2001
From: Shgck <shgck@pistache.land>
Date: Fri, 26 Feb 2016 15:20:55 +0100
Subject: [PATCH] Show genre when hovering on artists

---
 label/templates/label/artists.html |  1 +
 static/css/artists.css             | 39 ++++++++++++++++++++++++------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/label/templates/label/artists.html b/label/templates/label/artists.html
index a61f91e..44baef8 100644
--- a/label/templates/label/artists.html
+++ b/label/templates/label/artists.html
@@ -16,6 +16,7 @@
     <a href="{% url 'artist' artist.slug %}">
       <img src="{{ MEDIA_URL }}{{ artist.image }}" alt="" /> <br />
       {{ artist.name }}
+      <span class="artist-genre">{{ artist.genre }}</span>
     </a>
   </span>
 {% endfor %}
diff --git a/static/css/artists.css b/static/css/artists.css
index fea18b8..104cf06 100644
--- a/static/css/artists.css
+++ b/static/css/artists.css
@@ -1,23 +1,24 @@
 #artists {
-  text-align: center;
   width: 700px;
   margin: auto;
+  text-align: center;
 }
 
 #artists .artist {
-  display: inline-block;
   width: 120px;
+  position: relative;
   margin: 5px;
+  display: inline-block;
 }
 
 #artists .artist a {
   color: #929292;
   text-decoration: none;
-  -o-transition: .5s;
-  -ms-transition: .5s;
-  -moz-transition: .5s;
-  -webkit-transition: .5s;
   transition: .5s;
+  -moz-transition: .5s;
+  -ms-transition: .5s;
+  -o-transition: .5s;
+  -webkit-transition: .5s;
 }
 
 #artists .artist a:hover {
@@ -25,8 +26,30 @@
 }
 
 #artists .artist img {
-  width: 120px;
   height: 120px;
+  width: 120px;
   border: none;
   border-radius: 5px;
-}
\ No newline at end of file
+}
+
+#artists .artist-genre {
+  height: 120px;
+  width: 120px;
+  position:absolute;
+  top: 0px;
+  left: 0px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  color: white;
+  opacity: 0;
+  transition: all 0.7s ease;
+  -webkit-transition: all 0.7s ease;
+}
+
+#artists .artist-genre:hover {
+  opacity: 1;
+}