Adding a Zoom Effect to All Images on a Webpage

This script will add a zoom effect to all images on a webpage when hovered over. You can add it as a snippet or paste it into the console in the Chrome browser.

The script works by dynamically applying CSS transformations to all <img> elements, ensuring that each image smoothly scales up by 1.2 times its original size when hovered over, thanks to a 0.5-second transition effect.

Paste this snippet into the console panel or save it as a snippet - DevTool > Sources > Snippets

(function() {
    const style = document.createElement('style');
    style.innerHTML = `
        .zoom:hover {
            transform: scale(1.2);
        }
        .zoom {
            transition: transform 0.5s;
        }
    `;
    document.head.appendChild(style);

    document.querySelectorAll('img').forEach(element => {
        element.classList.add('zoom');
    });
})();

​