Thumbnail Preview on Hover

Provides a preview for any thumbnail on any site, excluding ads
Wrap lines
// ==UserScript==
// @name         Thumbnail Preview on Hover
// @namespace    http://your-namespace-here
// @version      1.1
// @description  Provides a preview for any thumbnail on any site, excluding ads
// @author       Tae
// @match        *://*/*
// @grant        none
// ==/UserScript==

// Select all images on the webpage
const images = document.querySelectorAll('img');

// Function to show preview
function showPreview(event) {
  const preview = document.createElement('div');
  preview.style.position = 'absolute';
  preview.style.border = '2px solid #000';
  preview.style.background = '#fff';
  preview.style.zIndex = '1000';
  preview.style.top = (event.clientY + 10) + 'px'; // Added a small offset for better view
  preview.style.left = (event.clientX + 10) + 'px';
  preview.style.width = '200px';
  preview.style.height = '200px';
  preview.style.backgroundImage = `url(${event.target.src})`;
  preview.style.backgroundSize = 'cover';
  preview.style.pointerEvents = 'none'; // Added to prevent hover issues
  preview.classList.add('thumbnail-preview');
  document.body.appendChild(preview);
}

// Function to hide preview
function hidePreview() {
  const preview = document.querySelector('.thumbnail-preview');
  if (preview) {
    preview.remove();
  }
}

// Add event listeners to each image
images.forEach(image => {
  if (!image.closest('.ad') && !image.src.includes('ad')) { // Exclude ad images
    image.addEventListener('mouseover', showPreview);
    image.addEventListener('mouseout', hidePreview);
  }
});