diff --git a/src/_h5ai/client/css/inc/preview.less b/src/_h5ai/client/css/inc/preview.less
index 796936bb..49f03122 100644
--- a/src/_h5ai/client/css/inc/preview.less
+++ b/src/_h5ai/client/css/inc/preview.less
@@ -37,17 +37,19 @@
 	right: 8px;
 	top: 8px;
 	cursor: pointer;
-	opacity: 0.5;
 
 	img {
 		background-color: rgba(0,0,0,0.5);
 		border-radius: 8px;
 		width: 48px;
 		height: 48px;
+		opacity: 0.5;
 	}
 
-	&:hover {
-		opacity: 1;
+	&:hover, &.hover {
+		img {
+			opacity: 1;
+		}
 	}
 }
 
@@ -55,7 +57,6 @@
 	position: absolute;
 	top: 50%;
 	cursor: pointer;
-	opacity: 0.5;
 
 	img {
 		background-color: rgba(0,0,0,0.5);
@@ -64,10 +65,13 @@
 		height: 48px;
 		margin: -72px 0;
 		padding: 48px 0;
+		opacity: 0.5;
 	}
 
-	&:hover {
-		opacity: 1;
+	&:hover, &.hover {
+		img {
+			opacity: 1;
+		}
 	}
 }
 
diff --git a/src/_h5ai/client/js/inc/ext/preview.js b/src/_h5ai/client/js/inc/ext/preview.js
index e432bcf5..d33eafb8 100644
--- a/src/_h5ai/client/js/inc/ext/preview.js
+++ b/src/_h5ai/client/js/inc/ext/preview.js
@@ -117,23 +117,32 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
 
 		onKeydown = function (event) {
 
-			var key = event.which;
+			var key = event.which,
+				delay = 300;
 
 			if (key === 27) { // esc
 				event.preventDefault();
 				event.stopImmediatePropagation();
+				$('#pv-bar-close, #pv-close-area').addClass('hover');
+				setTimeout(function () { $('#pv-bar-close, #pv-close-area').removeClass('hover'); }, delay);
 				onExit();
 			} else if (key === 8 || key === 37) { // backspace, left
 				event.preventDefault();
 				event.stopImmediatePropagation();
+				$('#pv-bar-prev, #pv-prev-area').addClass('hover');
+				setTimeout(function () { $('#pv-bar-prev, #pv-prev-area').removeClass('hover'); }, delay);
 				onPrevious();
 			} else if (key === 13 || key === 32 || key === 39) { // enter, space, right
 				event.preventDefault();
 				event.stopImmediatePropagation();
+				$('#pv-bar-next, #pv-next-area').addClass('hover');
+				setTimeout(function () { $('#pv-bar-next, #pv-next-area').removeClass('hover'); }, delay);
 				onNext();
 			} else if (key === 70) { // f
 				event.preventDefault();
 				event.stopImmediatePropagation();
+				$('#pv-bar-fullscreen').addClass('hover');
+				setTimeout(function () { $('#pv-bar-fullscreen').removeClass('hover'); }, delay);
 				onFullscreen();
 			}
 		},