Hide Images

Hide all Images, videos on all websites, hover to show
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Hide Images
// @namespace    http://tampermonkey.net/
// @version      2026-05-19
// @description  Hide all Images, videos on all websites, hover to show
// @author       wcx19911123
// @match        http*://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pronhub.com
// @run-at       document-start
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';
    const opacitySelector = "img, canvas, video, svg";
    const backGroundImageSelector = "[style*='background-image'], div, span, a, i, section, li, *:before, *:after";
    const backgroundColorSelector = "[style*='background-color'], div, span, a, section, article, aside, header, footer, button, input, textarea, select, table, tr, th, td";
    const targetAlpha = 0.15;
    const showAfter = 500;
    let hoverTimer = null;
    const css = `
        .force-hidden-image {
            opacity: 0 !important;
            /*visibility: hidden !important;*/
            transition: opacity 0.3s !important;
        }
        .force-hidden-bg {
            background-image: none !important;
        }
    `;
    const style = document.createElement('style');
    style.innerHTML = css;
    (document.head || document.documentElement).appendChild(style);

    function handleOpacity(el, toHidden) {
        if (!el || !el.matches || !el.matches(opacitySelector)) return;
        el.classList[toHidden ? 'add' : 'remove']("force-hidden-image");
    }

    function handleBGImage(el, toHidden) {
        if (!el || !el.matches || !el.matches(backGroundImageSelector)) return;
        el.classList[toHidden ? 'add' : 'remove']("force-hidden-bg");
    }

    function handleBGColor(el, toHidden) {
        if (!el || !el.matches || !el.matches(backgroundColorSelector)) return;
        if (toHidden) {
            if (el.dataset.bgModified !== 'true') {
                const currentBg = window.getComputedStyle(el).backgroundColor;
                if (currentBg && currentBg !== 'transparent' && currentBg !== 'rgba(0, 0, 0, 0)') {
                    const matches = currentBg.match(/\d+/g);
                    if (matches && matches.length >= 3) {
                        el.dataset.originalBg = currentBg;
                        const [r, g, b] = [...matches];
                        el.dataset.newBg = `rgba(${r}, ${g}, ${b}, ${targetAlpha})`;
                        el.style.setProperty('background-color', el.dataset.newBg, 'important');
                        el.dataset.bgModified = 'true';
                    }
                }
            } else if (el.dataset.newBg) {
                el.style.setProperty('background-color', el.dataset.newBg, 'important');
            }
        } else if (el.dataset.originalBg) {
            el.style.setProperty('background-color', el.dataset.originalBg, 'important');
        }
    }

    function handleTree(root = document.body, toHidden) {
        if (!root || !root.matches || !root.querySelectorAll) return;
        const handleList = function (selector, handleFunc) {
            let list = [...root.querySelectorAll(selector)];
            if (root.matches(selector)) list.unshift(root);
            list.forEach(el => handleFunc(el, toHidden) || hover2Show(el));
        };
        handleList(opacitySelector, handleOpacity);
        handleList(backGroundImageSelector, handleBGImage);
        handleList(backgroundColorSelector, handleBGColor);
    }

    window.addEventListener('load', () => handleTree(document.body, true));

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => handleTree(node, true));
            } else if (mutation.type === 'attributes' && mutation.target.dataset.bgModified !== 'true') {
                handleBGColor(mutation.target, true);
            }
        });
    });
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['class', 'style'],
    });

    function hover2Show(el) {
        if (!el || !el.matches || el.dataset.addedHover2Show === 'true') return;
        el.dataset.addedHover2Show = 'true';
        el.addEventListener('mouseenter', e => {
            e.stopPropagation();
            clearTimeout(hoverTimer);
            hoverTimer = setTimeout(() => {
                if (el.matches(opacitySelector)) handleOpacity(el, false);
                if (el.matches(backGroundImageSelector)) handleBGImage(el, false);
                if (el.matches(backgroundColorSelector)) handleBGColor(el, false);
            }, showAfter);
        });
        el.addEventListener('mouseleave', e => {
            e.stopPropagation();
            clearTimeout(hoverTimer);
            if (el.matches(opacitySelector)) handleOpacity(el, true);
            if (el.matches(backGroundImageSelector)) handleBGImage(el, true);
            if (el.matches(backgroundColorSelector)) handleBGColor(el, true);
        });
    }
})();