Zoom on Hover enlarges images when you hover over them.
// ==UserScript==
// @name Zoom on Hover
// @name:es Zoom on Hover
// @version 1.2
// @description Zoom on Hover enlarges images when you hover over them.
// @description:es Zoom on Hover amplía las imágenes cuando pasas el cursor sobre ellas.
// @author Adam Jensen
// @match *://*/*
// @grant GM_addStyle
// @license MIT
// @namespace https://greatest.deepsurf.us/users/1398884
// ==/UserScript==
(function() {
'use strict';
// Configuration options (you can adjust these values)
const MAX_WIDTH = 500; // Maximum width of the enlarged image
const MAX_HEIGHT = 600; // Maximum height of the enlarged image
const ZOOM_FACTOR = 2; // Zoom factor (1x, 1.5x, 2x, 3x, etc)
// Styles
GM_addStyle(`
.ampliar-img-flotante {
position: absolute;
z-index: 9999;
border: 2px solid #ccc;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: none;
padding: 0px;
pointer-events: none;
height: auto;
width: auto;
box-sizing: border-box;
}
.ampliar-img-flotante img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
margin: 0;
box-sizing: border-box;
}
`);
// Create the floating window
const ventanaFlotante = document.createElement('div');
ventanaFlotante.classList.add('ampliar-img-flotante');
const imagenFlotante = document.createElement('img');
ventanaFlotante.appendChild(imagenFlotante);
document.body.appendChild(ventanaFlotante);
// Function to enlarge the image with the zoom factor
const ampliarImagen = (event) => {
const target = event.target;
let imgSrc = '';
if (target.tagName === 'IMG') {
// If the element is an <img>, use the src attribute
imgSrc = target.src;
} else if (target.style.backgroundImage) {
// If the element has a background image, extract the URL
imgSrc = target.style.backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
}
// Skip if the image source is not found or is an unwanted source
if (!imgSrc || imgSrc.includes('youtube.com') || imgSrc.includes('gstatic.com')) {
return;
}
const img = new Image();
img.onload = () => {
const widthWithZoom = img.width * ZOOM_FACTOR;
const heightWithZoom = img.height * ZOOM_FACTOR;
let finalWidth, finalHeight;
if (img.width > img.height) {
finalWidth = Math.min(widthWithZoom, MAX_WIDTH);
finalHeight = (img.height * finalWidth) / img.width;
if (finalHeight > MAX_HEIGHT) {
finalHeight = MAX_HEIGHT;
finalWidth = (img.width * finalHeight) / img.height;
}
} else {
finalHeight = Math.min(heightWithZoom, MAX_HEIGHT);
finalWidth = (img.width * finalHeight) / img.height;
if (finalWidth > MAX_WIDTH) {
finalWidth = MAX_WIDTH;
finalHeight = (img.height * finalWidth) / img.width;
}
}
imagenFlotante.src = imgSrc;
ventanaFlotante.style.display = 'block';
ventanaFlotante.style.width = `${finalWidth}px`;
ventanaFlotante.style.height = `${finalHeight}px`;
// Calculate the position of the floating window
const { top, left, width, height } = target.getBoundingClientRect();
let newTop = top + window.scrollY;
let newLeft = left + width + window.scrollX;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Adjust the position so it doesn't overflow to the right
if (newLeft + ventanaFlotante.offsetWidth > viewportWidth) {
newLeft = left - ventanaFlotante.offsetWidth + window.scrollX;
}
// Adjust the position so it doesn't overflow to the bottom
if (newTop + ventanaFlotante.offsetHeight > viewportHeight + window.scrollY) {
newTop = top + height + window.scrollY - ventanaFlotante.offsetHeight;
}
// Adjust the position so it doesn't overflow to the top
if (newTop < window.scrollY) {
newTop = window.scrollY;
}
// Adjust the position so it doesn't overflow to the bottom
if (newTop + ventanaFlotante.offsetHeight > viewportHeight + window.scrollY) {
newTop = viewportHeight + window.scrollY - ventanaFlotante.offsetHeight;
}
ventanaFlotante.style.top = `${newTop}px`;
ventanaFlotante.style.left = `${newLeft}px`;
};
img.src = imgSrc;
};
// Hide the floating window
const ocultarVentanaFlotante = () => {
ventanaFlotante.style.display = 'none';
};
// Detect images
const detectarImagenes = () => {
const elements = document.querySelectorAll('img, [style*="background-image"]');
elements.forEach((target) => {
if (target.tagName === 'IMG') {
target.addEventListener('mouseenter', ampliarImagen);
target.addEventListener('mouseleave', ocultarVentanaFlotante);
} else if (target.style.backgroundImage) {
target.addEventListener('mouseenter', ampliarImagen);
target.addEventListener('mouseleave', ocultarVentanaFlotante);
}
});
};
// Call the function to detect images
detectarImagenes();
// Add a mutation observer to detect dynamically added images or background elements
const observer = new MutationObserver(detectarImagenes);
observer.observe(document.body, { childList: true, subtree: true });
})();