Show genre when hovering on artists

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 %}

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;
 }
+
+#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;
+}