Image hover preview (JS)
Shows a large floating preview of an image next to the cursor when you hover a thumbnail.
Code to copy
// Show a large floating preview of an image while the cursor is over it.
var box = document.createElement('div');
box.style.cssText = 'position:fixed;z-index:2147483647;pointer-events:none;' +
'border:2px solid #fff;box-shadow:0 4px 24px rgba(0,0,0,.5);display:none;';
var preview = document.createElement('img');
preview.style.cssText = 'max-width:480px;max-height:480px;display:block;';
box.appendChild(preview);
document.body.appendChild(box);
document.addEventListener('mouseover', function (e) {
var img = e.target.closest && e.target.closest('img');
if (!img || !img.currentSrc) { box.style.display = 'none'; return; }
preview.src = img.currentSrc;
box.style.display = 'block';
});
document.addEventListener('mousemove', function (e) {
box.style.left = Math.min(e.clientX + 20, innerWidth - 500) + 'px';
box.style.top = Math.min(e.clientY + 20, innerHeight - 500) + 'px';
});
document.addEventListener('mouseout', function () { box.style.display = 'none'; });How to use this example
- Copy the code with the button above.
- Install JustZix (2 minutes) and open the extension on the target page.
- Add a new rule matching that page.
- Paste the code into the rule's JavaScript panel and save — it runs on every page visit.
Rate this example
No ratings yet — be the first.