diff --git a/assets/css/app.css b/assets/css/app.css
index b063ac71..d1dc0c53 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -358,12 +358,6 @@ btn-xs
     margin-right: auto;
 }
 
-.hoverpic:hover {
-    transform: scale(6);
-    background: white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
 .darkmode--activated .hoverpic:hover {
     background: black;
 }
diff --git a/assets/ts_src/event_listeners.ts b/assets/ts_src/event_listeners.ts
index 7305d168..c2a53437 100644
--- a/assets/ts_src/event_listeners.ts
+++ b/assets/ts_src/event_listeners.ts
@@ -361,8 +361,15 @@ $(document).on("ajaxUI:reload ajaxUI:start", function () {
  * Load the higher resolution version of hover pictures.
  */
 $(document).on("ajaxUI:reload ajaxUI:start ajaxUI:dt_loaded", function () {
-    $(".hoverpic[data-thumbnail]").mouseenter(function() {
-        $(this).attr('src', $(this).data('thumbnail'));
+
+    $('.hoverpic[data-thumbnail]').popover({
+        html: true,
+        trigger: 'hover',
+        placement: 'right',
+        container: 'body',
+        content: function () {
+            return '<img class="img-fluid" src="' + $(this).data('thumbnail') + '" />';
+        }
     });
 });