<ul class="container">
<li>
<div class="background" inert></div>
<div class="foreground"></div>
</li>
<li>
<div class="background" inert></div>
<div class="foreground"></div>
</li>
</ul>
ul.container {
width: 100vw;
height: 500px;
display: grid;
--split-width: 25px; /* Width of divider line */
list-style: none;
padding: 0;
> li {
width: 100%;
height: 100%;
grid-area: 1 / 1;
transition: clip-path 0.5s ease;
display: grid;
> * {
grid-area: 1 / 1;
}
}
/* Initial clip path */
& > :nth-child(2) {
clip-path: polygon(
calc(50% - var(--split-width)) 100%,
calc(50% + var(--split-width)) 0,
100% 0,
100% 100%
);
}
/* First child hover */
& > :nth-child(1):hover + * {
clip-path: polygon(
calc(100% - var(--split-width) * 4) 100%,
calc(100% - var(--split-width) * 2) 0,
100% 0,
100% 100%
);
}
/* Second child hover */
& > :nth-child(2):hover {
clip-path: polygon(
calc(var(--split-width) * 2) 100%,
calc(var(--split-width) * 4) 0,
100% 0,
100% 100%
);
}
}
/* Demo styles */
html, body { height: 100%; }
body {
margin: 0;
background: black;
display: grid;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
.container {
> :nth-child(1) {
background: blue;
}
> :nth-child(2) {
background: teal;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.