diff --git a/app/lib/components/Me.jsx b/app/lib/components/Me.jsx
index 99bb31a..38dc747 100644
--- a/app/lib/components/Me.jsx
+++ b/app/lib/components/Me.jsx
@@ -11,6 +11,24 @@ import ScreenView from './ScreenView';
 
 class Me extends React.Component
 {
+	state = {
+		controlsVisible : false
+	};
+
+	handleMouseOver = () => 
+	{
+		this.setState({
+			controlsVisible : true
+		});
+	};
+
+	handleMouseOut = () => 
+	{
+		this.setState({
+			controlsVisible : false
+		});
+	};
+
 	constructor(props)
 	{
 		super(props);
@@ -85,10 +103,15 @@ class Me extends React.Component
 				data-tip={tip}
 				data-tip-disable={!tip}
 				data-type='dark'
+				onMouseOver={this.handleMouseOver}
+				onMouseOut={this.handleMouseOut}
 			>
 				<div className={classnames('view-container', 'webcam')}>
 					{connected ?
-						<div className='controls'>
+						<div className={classnames('controls', {
+							visible : this.state.controlsVisible
+						})}
+						>
 							<div
 								className={classnames('button', 'mic', micState, {
 									disabled : me.audioInProgress
diff --git a/app/stylus/components/Me.styl b/app/stylus/components/Me.styl
index f1095a9..2f21d71 100644
--- a/app/stylus/components/Me.styl
+++ b/app/stylus/components/Me.styl
@@ -27,7 +27,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;