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
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
Code:
(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');
});
})();