☰

Hover on Entries Overlay

Bringing back the hover on entries to overlay the whole image in designcontest.com

// ==UserScript==
// @name         Hover on Entries Overlay
// @namespace    https://greasyfork.org/en/users/781396-yad
// @version      1.12
// @description  Bringing back the hover on entries to overlay the whole image in designcontest.com
// @author       YAD
// @match        https://*.designcontest.com/*/entries/*
// @icon         https://designcontest.nyc3.digitaloceanspaces.com/images/favicon.png
// @license      MIT
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        #image-overlay {
            position: fixed;
            display: none;
            border: 2px solid black;
            z-index: 1000;
            width: 420px;
            height: 420px;
            background-color: white;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        #image-overlay img {
            max-width: 100%;
            max-height: 100%;
        }
    `);

    const overlay = document.createElement('div');
    overlay.id = 'image-overlay';
    const overlayImage = document.createElement('img');
    overlay.appendChild(overlayImage);
    document.body.appendChild(overlay);

    // Function to adjust overlay position based on mouse position
    function adjustOverlayPosition(event) {
        const margin = 20;
        const overlayWidth = 400;
        const overlayHeight = 400;
        let left = event.clientX + margin;
        let top = event.clientY + margin;

        // Adjust position based on mouse position and viewport
        if (left + overlayWidth > window.innerWidth) {
            left = event.clientX - overlayWidth - margin;
        }
        if (top + overlayHeight > window.innerHeight) {
            top = event.clientY - overlayHeight - margin;
        }

        overlay.style.left = `${left}px`;
        overlay.style.top = `${top}px`;
    }

    // Event listener for mouseover on images
    document.addEventListener('mouseover', event => {
        const img = event.target;
        if (img.tagName === 'IMG' && img.src.includes('big_')) {
            overlayImage.src = img.src.replace('big_', '');
            overlay.style.display = 'flex';
            adjustOverlayPosition(event);
        }
    });

    // Event listener for mousemove to adjust overlay position
    document.addEventListener('mousemove', event => {
        if (overlay.style.display === 'flex') {
            adjustOverlayPosition(event);
        }
    });

    // Event listener for mouseout from images or overlay
    document.addEventListener('mouseout', event => {
        const img = event.target;
        if (img.tagName === 'IMG' && img.src.includes('big_')) {
            overlay.style.display = 'none';
        }
    });

    // Event listener for mouseleave from overlay
    overlay.addEventListener('mouseleave', () => {
        overlay.style.display = 'none';
    });
})();