Fixed a couple of mouse hover issues due to CSS transitions.

src/styles/components/_audiovideo.scss

@@ -54,6 +54,11 @@ right:520px;
 	height:100%;
 }
 
+.audioVideo.active {
+	perspective: 1000;
+	-webkit-perspective: 1000;
+}
+
 .audioVideo .overlayactions {
 	position: absolute;
 	left:0px;
@@ -62,11 +67,11 @@ right:520px;
 	height:70px;
 	margin:auto 0;
 	width:40px;
-	opacity:0.5;
 	padding:3px 0;
 	background: rgba(0,0,0,0.2);
 	text-shadow: 0 0 5px black;
 	z-index:5;
+	opacity:0;
 
 	button {
 		width:40px;
@@ -76,6 +81,14 @@ right:520px;
 	}
 }
 
+.audioVideo.active:hover .overlayactions {
+	opacity: 0.3;
+}
+
+.audioVideo.active .overlayactions:hover {
+	opacity: 0.6;
+}
+
 .remoteVideo .peerlabel {
 	-webkit-transition: color 500ms ease-out;
 	-moz-transition: color 500ms ease-out;

src/styles/components/_webrtc.scss

@@ -20,9 +20,6 @@
  */
 #container {
 position: absolute;
-/*margin: 0px auto;*/
-perspective: 1000;
--webkit-perspective: 1000;
 top:0px;
 left:0px;
 bottom:0px;
@@ -169,7 +166,7 @@ pointer-events:auto;
 .remoteVideo .peeractions i {
 font-size:3vw;
 }
-.peeractions:hover {
+.remoteVideo .peeractions:hover {
 opacity:.5;
 }
 .remoteVideo .peerlabel {

static/js/directives/audiovideo.js

@@ -30,7 +30,6 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
             var peers = {};
             var events = $({});
 
-            $scope.card = $element;
             $scope.container = $element.parent().get(0);
             $scope.layoutparent = $element.parent().parent();
 
@@ -136,7 +135,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
                 if (!$scope.isActive) {
                     $scope.isActive = true;
                     $scope.remoteVideos.style.opacity = 1;
-                    $scope.card.addClass("active");
+                    $element.addClass("active");
                     //console.log("active 3");
                     _.delay(function() {
                         $scope.localVideo.style.opacity = 0;
@@ -202,7 +201,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
                 $scope.mini.removeClass("visible");
                 $scope.localVideo.style.opacity = 0;
                 $scope.remoteVideos.style.opacity = 0;
-                $scope.card.removeClass('active');
+                $element.removeClass('active');
                 _.each(peers, function(scope, k) {
                     scope.$destroy();
                     delete peers[k];
@@ -241,7 +240,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 
                 //console.log("compile", arguments)
 
-                $(scope.card).on("doubletap dblclick", _.debounce(scope.toggleFullscreen, 100, true));
+                iElement.on("doubletap dblclick", _.debounce(scope.toggleFullscreen, 100, true));
 
                 var rendererName = null;
                 var getRendererName = function() {