Skip to content
/* ── Paste into Elementor > Site Settings > Custom Code (footer) ── */
/* OR use the WPCode plugin > Snippets > add new > JS */
(function () {
const RADIUS = 120; /* ← reveal circle size in px */
const SPEED = 80; /* ← transition in ms (0 = instant) */
function initReveal() {
const section = document.getElementById('hover-reveal');
if (!section) return;
const overlay = section.querySelector('.reveal-overlay');
const cursor = section.querySelector('.reveal-cursor');
if (!overlay) return;
let raf = null;
let currentX = -9999, currentY = -9999;
let targetX = -9999, targetY = -9999;
function applyMask(x, y) {
const mask =
'radial-gradient(circle ' + RADIUS + 'px at ' + x + 'px ' + y + 'px, ' +
'transparent 100%, black 100%)';
overlay.style.webkitMaskImage = mask;
overlay.style.maskImage = mask;
}
function lerp(a, b, t) { return a + (b - a) * t; }
function animate() {
currentX = lerp(currentX, targetX, SPEED > 0 ? 0.18 : 1);
currentY = lerp(currentY, targetY, SPEED > 0 ? 0.18 : 1);
applyMask(Math.round(currentX), Math.round(currentY));
raf = requestAnimationFrame(animate);
}
section.addEventListener('mouseenter', function () {
raf = requestAnimationFrame(animate);
});
section.addEventListener('mousemove', function (e) {
const rect = section.getBoundingClientRect();
targetX = e.clientX - rect.left;
targetY = e.clientY - rect.top;
if (cursor) {
cursor.style.left = targetX + 'px';
cursor.style.top = targetY + 'px';
}
});
section.addEventListener('mouseleave', function () {
cancelAnimationFrame(raf);
/* reset overlay to fully opaque */
overlay.style.webkitMaskImage =
'radial-gradient(circle 0px at -9999px -9999px, transparent 100%, black 100%)';
overlay.style.maskImage =
'radial-gradient(circle 0px at -9999px -9999px, transparent 100%, black 100%)';
if (cursor) {
cursor.style.opacity = '0';
cursor.style.transform = 'translate(-50%, -50%) scale(0)';
}
});
}
/* Run after Elementor's frontend JS is ready */
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initReveal);
} else {
initReveal();
}
})();
From Pittsburgh, US
About 5 months ago
From IONIA, US
About 2 years ago
