// đĄ CSS Nugget: Animated Illustrations with clip-path
// âšī¸ Move cursor over the square to trigger the animation
// đ https://codyhouse.co/nuggets/animated-illustrations-clip-path
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.img-wrapper {
position: relative;
width: 300px;
height: 300px;
background-color: #071b24;
}
.img-wrapper:hover .mountain {
clip-path: polygon(15% 85%, 30% 60%, 41% 74%, 61% 40%, 85% 85%);
}
.sun {
position: absolute;
width: 48px;
height: 48px;
border-radius: 50%;
top: 100px;
left: 64px;
background-color: violet;
}
.mountain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: violet;
clip-path: polygon(0% 100%, 0% 0%, 50% 0%, 100% 0%, 100% 100%);
transition: .3s var(--ease-out);
}
View Compiled