change close icon

2 files changed, 10 insertions, 5 deletions

diff --git a/css/style.css b/css/style.css
index dc067b1..1cf1793 100755
--- a/css/style.css
+++ b/css/style.css
@@ -48,14 +48,19 @@ video {
 	left: 0;
 }
 
-a.box-close {
+a.icon-view-close {
 	position: absolute;
-	top: -12px;
-	right: -12px;
+	top: 10px;
+	right: 10px;
 	width: 30px;
 	height: 30px;
+	opacity: .35;
 	cursor: pointer;
-	background: url('../img/close.png') no-repeat 0 0;
+	transition: opacity 0.5s, linear;
+}
+
+a.icon-view-close:hover {
+	opacity: .75;
 }
 
 
diff --git a/js/viewer.js b/js/viewer.js
index 74be3f0..ac3fc49 100755
--- a/js/viewer.js
+++ b/js/viewer.js
@@ -7,7 +7,7 @@ var videoViewer = {
 		'</video>',
 		show : function () {
 			// insert HTML
-			$('<div id="videoplayer_overlay" style="display:none;"><div id="videoplayer_outer_container"><div id="videoplayer_container"><div id="videoplayer"><a class="box-close" id="box-close" href="#"></a></div></div></div></div>').appendTo('body');
+			$('<div id="videoplayer_overlay" style="display:none;"><div id="videoplayer_outer_container"><div id="videoplayer_container"><div id="videoplayer"><a class="icon-view-close" id="box-close" href="#"></a></div></div></div></div>').appendTo('body');
 			var playerView = videoViewer.UI.playerTemplate
 								.replace(/%type%/g, videoViewer.mime)
 								.replace(/%src%/g, videoViewer.location)