popup image windows

// ==UserScript==
// @name         Image Hover Pop-out
// @namespace    nixsy.comm
// @version      1.0
// @description  Show larger image in a pop-out when hovering over an image
// @author       Nixsy
// @match        http://*/*
// @match        https://*/*
// @require      http://code.jquery.com/jquery-latest.min.js
// @grant        GM_addStyle
// ==/UserScript==

// Add styles for the pop-out window
GM_addStyle(`
    .hoverPopup {
        position: absolute;
        max-width: 500px;
        max-height: 700px;
        padding: 5px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        display: none;
    }
`);

// Create pop-out div
const popupDiv = $('<div class="hoverPopup"></div>').appendTo('body');

// Function to show image in pop-out
function showPopup(imgSrc, mouseX, mouseY) {
    popupDiv.html(`<img src="${imgSrc}" style="max-width:100%; max-height:100%;" />`);
    popupDiv.css({ top: mouseY + 10, left: mouseX + 10 }).fadeIn('fast');
}

// Function to hide pop-out
function hidePopup() {
    popupDiv.hide();
}

// Attach hover event to all images
$('img').hover(function(e) {
    const imgSrc = $(this).attr('src');
    const mouseX = e.pageX;
    const mouseY = e.pageY;
    showPopup(imgSrc, mouseX, mouseY);
}, function() {
    hidePopup();
});