made some changes to room cards

app/client/app.css

@@ -1280,11 +1280,6 @@ input[type="checkbox"]:checked + #two-label:after {
     display: block;
 }
 
-.user-num{
-    font-size: 2em !important;
-    line-height: 100px;
-}
-
 .remove-import-song {
     position: absolute;
     right: 0px;
@@ -1315,3 +1310,21 @@ input[type="checkbox"]:checked + #two-label:after {
     margin-right: auto;
     display: block;
 }
+
+.card-content i{
+    line-height: inherit;
+    float: left;
+}
+
+.card-image img{
+    opacity: 1;
+    transition: 0.3s;
+}
+
+.card-image img:hover{
+    opacity: 0.5;
+}
+
+.user-num{
+    font-size: 1.5em;
+}

app/client/cardcaption.css

@@ -0,0 +1,36 @@
+/*Credids to http://www.1stwebdesigner.com/image-caption-animation-css3/*/
+.card-image:hover figcaption {
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+    filter: alpha(opacity=100);
+    opacity: 1;
+    top: 0;
+}
+
+figcaption {
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    filter: alpha(opacity=0);
+    opacity: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: rgba(0,0,0,.6);
+    color: #fff;
+    -webkit-transition: all .5s ease;
+    -moz-transition: all .5s ease;
+    -o-transition: all .5s ease;
+    -ms-transition: all .5s ease;
+    transition: all .5s ease;
+}
+
+figcaption h5{
+    text-align: center;
+    margin-top: 10px;
+}
+
+/*End of stuff*/
+
+figcaption a{
+    width: 100%;
+    position: absolute !important;
+    bottom: 0;
+}

app/client/scripts/events.js

@@ -516,7 +516,7 @@ Template.queues.events({
             for(var i in data){
                 for(var j in data[i].items){
                     if(search.indexOf(data[i].items[j].name) !== -1 && artistName.indexOf(data[i].items[j].artists[0].name) !== -1){
-                        $("#img").val(data[i].items[j].album.images[1].url);
+                        $("#img").val(data[i].items[j].album.images[2].url);
                         $("#duration").val(data[i].items[j].duration_ms / 1000);
                         return;
                     }
@@ -926,7 +926,7 @@ Template.room.events({
                                     if (data.tracks.items.length > 0) {
                                         $("#title").val(data.tracks.items[0].name);
                                         var artists = [];
-                                        $("#img").val(data.tracks.items[0].album.images[1].url);
+                                        $("#img").val(data.tracks.items[0].album.images[2].url);
                                         data.tracks.items[0].artists.forEach(function (artist) {
                                             artists.push(artist.name);
                                         });
@@ -1272,7 +1272,7 @@ Template.stations.events({
             for(var i in data){
                 for(var j in data[i].items){
                     if(search.indexOf(data[i].items[j].name) !== -1 && artistName.indexOf(data[i].items[j].artists[0].name) !== -1){
-                        $("#img").val(data[i].items[j].album.images[1].url);
+                        $("#img").val(data[i].items[j].album.images[2].url);
                         $("#duration").val(data[i].items[j].duration_ms / 1000);
                         return;
                     }

app/client/scripts/helpers.js

@@ -85,17 +85,20 @@ Template.banned.helpers({
     }
 });
 
-Template.dashboard.helpers({
-    rooms: function() {
-        return Rooms.find({});
-    },
-    currentSong: function() {
+Template.header.helpers({
+    userId: function() {
+        return Meteor.userId();
+    }
+});
+
+Template.home.helpers({
+    currentSong: function(){
         var type = this.type;
         var room = Rooms.findOne({type: type});
-        if (room !== undefined) {
+        if(room !== undefined){
             return room.currentSong;
         } else {
-            return {};
+            return false;
         }
     },
     userNum: function(){
@@ -103,13 +106,7 @@ Template.dashboard.helpers({
         var userNum = Rooms.findOne({type: type}).users;
         return userNum;
     }
-});
-
-Template.header.helpers({
-    userId: function() {
-        return Meteor.userId();
-    }
-});
+})
 
 Template.playlist.helpers({
     playlist_songs: function() {

app/client/templates/home.html

@@ -7,15 +7,19 @@
         <div class="col s12 m5 l2">
           <div class="card">
             <div class="card-image waves-effect waves-block waves-light">
-              <a href="/{{type}}"><img src={{currentSong.song.img}}></a>
+                <img src={{currentSong.song.img}}>
+                <figcaption>
+                    <h5>{{currentSong.song.title}}</h5>
+                    <h5>{{currentSong.song.artist}}</h5>
+                    <a href=/{{type}} class="waves-effect waves-light btn">Join Room</a>
+                </figcaption>
             </div>
             <div class="card-content">
-              <span class="card-title activator grey-text text-darken-4">{{display}}<i class="material-icons right">more_vert</i></span>
-              <p><a href="/{{type}}">Join Room</a></p>
+                <span class="card-title activator grey-text text-darken-4">{{display}}<i class="material-icons right">more_vert</i></span>
+                <p><span class="user-num">{{userNum}}</span> <i class="material-icons">perm_identity</i></p>
             </div>
             <div class="card-reveal">
-              <span class="card-title grey-text text-darken-4">EDM Room<i class="material-icons right">close</i></span>
-              <p>The EDM room provides music similar to...</p>
+              <span class="card-title grey-text text-darken-4">{{display}}<i class="material-icons right">close</i></span>
             </div>
           </div>
         </div>