Only show Peer controls when hovering

app/stylus/components/Peer.styl

@@ -41,7 +41,16 @@
 			justify-content: flex-start;
 			align-items: center;
 			padding: 0.4vmin;
+			visibility: hidden;
+			opacity: 0;
+			animation: fade-out 0.3s;
 
+			&.visible {
+				visibility: visible;
+				opacity: 1;
+				animation: fade-in 0.3s;
+			}
+			
 			> .button {
 				flex: 0 0 auto;
 				margin: 0.2vmin;

app/stylus/components/Room.styl

@@ -440,27 +440,3 @@
 @keyframes Room-info-state-connecting {
 	50% { background-color: rgba(orange, 0.75); }
 }
-
-@keyframes fade-in {
-	from {
-		opacity: 0;
-		visibility: hidden;
-	}
-
-	to {
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-@keyframes fade-out {
-	from {
-		opacity: 1;
-		visibility: visible;
-	}
-
-	to {
-		opacity: 0;
-		visibility: hidden;
-	}
-}

app/stylus/index.styl

@@ -5,6 +5,7 @@ global-reset();
 @import './mixins';
 @import './fonts';
 @import './reset';
+@import './keyframes';
 
 html {
 	height: 100%;

app/stylus/keyframes.styl

@@ -0,0 +1,23 @@
+@keyframes fade-in {
+	from {
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	to {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	to {
+		opacity: 0;
+		visibility: hidden;
+	}
+}