A hover-based accordion built for smooth interaction and visual impact. Panels expand fluidly while others contract, with child content fading in and inactive sections subtly blurred. Background videos remain hidden until their panel is active, then transition in seamlessly. JavaScript ensures videos lazy load on hover, with just one playing at a time while others pause and reset, keeping the focus exactly where the user is.
Copy the structure and paste it into your page canvas.
Add this code with a snippets plugin in <head>, or place it in Element CSS, Page CSS, or Site Settings.
@media (min-width:1025px) {
.ou-acc-wrap > .ou-acc-item {
flex: 1;
transition: flex 1.2s ease;
overflow: hidden;
position: relative;
}
.ou-acc-wrap > .ou-acc-item:hover {
flex: 4;
}
.ou-acc-content > * {
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.ou-acc-item:hover .ou-acc-content > * {
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease 0.6s, visibility 0s linear 0s;
}
.ou-acc-wrap > .ou-acc-item:not(:hover) > .ou-acc-content {
filter: grayscale(70%) blur(0.7px);
transition: filter 0.6s ease;
}
.ou-acc-wrap > .ou-acc-item:hover > .ou-acc-content {
filter: none;
}
.ou-acc-item .ou-bg-video,
.ou-acc-item .ou-bg-video-embed {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (max-width:1024px) {
.ou-acc-item .ou-bg-video-embed {
display: none;
}
}Add this code with a snippets plugin right before the closing </body> tag.
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".ou-acc-item").forEach(item => {
const video = item.querySelector(".ou-acc-content .ou-bg-video");
item.addEventListener("mouseenter", () => {
if (video) {
if (!video.src && video.dataset.src) {
video.src = video.dataset.src;
video.load();
}
video.currentTime = 0;
video.play().catch(() => {});
}
});
item.addEventListener("mouseleave", () => {
if (video) {
video.pause();
video.currentTime = 0;
}
});
});
});Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
