/* Page zoom transition overlay */
.hoa-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0f0f0f;
z-index: 9999;
transform: scale(0);
opacity: 0;
transition: transform 0.8s ease, opacity 0.8s ease;
pointer-events: none;
}
.hoa-overlay.active {
transform: scale(1);
opacity: 1;
}
/* Icon container */
.icon-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
cursor: pointer;
}
svg {
overflow: visible;
}
/* Hover drama */
.icon:hover .roof {
fill: #9B7BFF;
filter: drop-shadow(0 0 10px #8B5CF6);
}
.icon:hover .house {
transform: scale(1.05);
}
.icon {
transition: transform 0.5s ease;
}
.icon:hover {
transform: translateY(-6px);
}
.door {
transform-origin: bottom center;
transition: transform 0.5s ease, filter 0.5s ease;
}
.icon:hover .door {
transform: scaleY(0.05) translateY(5px);
filter: brightness(1.4);
}
/* subtle inner glow effect */
.glow {
opacity: 0;
transition: opacity 0.4s ease;
}
.icon:hover .glow {
opacity: 1;
}
const link = document.getElementById(“enterHouse”);
const overlay = document.getElementById(“overlay”);
link.addEventListener(“click”, function(e) {
e.preventDefault();
overlay.classList.add(“active”);
// dramatic delay before redirect (zoom effect)
setTimeout(() => {
window.location.href = “https://your-link-here.com”;
}, 800);
});
-
Subscribe
Subscribed
Have a WordPress.com account? Log in now.
