☰

scenenzbs Thumb-Hoverblock + Overlay Final

Cover-Hover: rahmenlos, performant, fix 200px nach rechts verschoben, Zoom 4.2x größer als Standardgröße (340x480)

As of 11. 09. 2025. See the latest version.

// ==UserScript==
// @name         scenenzbs Thumb-Hoverblock + Overlay Final
// @namespace    https://scenenzbs.com/
// @version      6.0
// @description  Cover-Hover: rahmenlos, performant, fix 200px nach rechts verschoben, Zoom 4.2x größer als Standardgröße (340x480)
// @author       Baumeister
// @match        https://scenenzbs.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Fixe Einstellungen
    const ZOOMFACTOR = 4.2;     // feste Vergrößerung
    const BASE_WIDTH = 340;
    const BASE_HEIGHT = 480;
    const H_OFFSET_PX = 200;    // feste Verschiebung nach rechts

    // CSS nur einmal einfügen
    if (!window.__overlayCSS) {
        const style = document.createElement("style");
        style.textContent = `
            img.thumb-zoom:hover,
            .thumb-zoom-wrap:hover img.thumb-zoom,
            img.thumb-zoom:active,
            img.thumb-zoom:focus {
                transform: none !important;
                transition: none !important;
                z-index: auto !important;
                position: static !important;
                outline: none !important;
                filter: none !important;
                box-shadow: none !important;
            }

            .ultra-overlay-img {
                position: fixed;
                top: 50%;
                left: 50%;
                z-index: 99999;
                opacity: 0;
                pointer-events: none;
                display: block;
                max-width: ${BASE_WIDTH * ZOOMFACTOR}px;
                max-height: ${BASE_HEIGHT * ZOOMFACTOR}px;
                object-fit: contain;
                transition: opacity 0.18s cubic-bezier(.19,1,.22,1);
            }
        `;
        document.head.appendChild(style);
        window.__overlayCSS = true;
    }

    // Overlay-Bild erzeugen
    if (!window.__overlayImg) {
        const overlayImg = document.createElement('img');
        overlayImg.className = 'ultra-overlay-img';
        overlayImg.style.opacity = '0';
        document.body.appendChild(overlayImg);
        window.__overlayImg = overlayImg;
    }

    // Platzhalter erkennen
    function isPlaceholder(img) {
        const src = (img.getAttribute('src') || '').toLowerCase();
        return src.includes('category_') || src.includes('placeholder.webp');
    }

    // Events für Thumbs binden
    function bindOverlay() {
        document.querySelectorAll('img.thumb-zoom').forEach(img => {
            if (img.dataset.ultraBound) return;
            img.dataset.ultraBound = '1';

            img.addEventListener('mouseenter', () => {
                if (isPlaceholder(img)) {
                    window.__overlayImg.style.opacity = '0';
                    return;
                }
                if (window.__overlayImg.src !== img.src) {
                    window.__overlayImg.src = img.src;
                }
                // feste Verschiebung nach rechts
                window.__overlayImg.style.transform =
                    `translate(calc(-50% + ${H_OFFSET_PX}px), -50%)`;
                window.__overlayImg.style.opacity = '1';
            });

            img.addEventListener('mouseleave', () => {
                window.__overlayImg.style.opacity = '0';
            });
        });
    }

    // Scroll-Guard
    window.addEventListener('scroll', () => {
        if (window.__overlayImg && window.__overlayImg.style.opacity === '1') {
            window.__overlayImg.style.opacity = '0';
        }
    });

    // Start
    bindOverlay();

    const observer = new MutationObserver(() => {
        bindOverlay();
    });
    observer.observe(document.body, { childList: true, subtree: true });

})();