https://www.xfiner.com/contact-us
This is a website, on its page ie contact page there is an image hover effect, I want to apply this effect in my project, but it is not working, I have given html and css code, only javascript code Writing can you help me to create this project in this image hover effect clip-path animation is var transform this is the website link.
https://www.xfiner.com/contact-us
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Inter", sans-serif;
background-color: #0f0d11;
}
.image-container {
max-width: 46%;
aspect-ratio: 4 / 2.5;
width: 100%;
display: grid;
grid-auto-columns: 1fr;
min-height: 580px;
position: relative;
width: 60%;
border-radius: 10px;
min-height: 400px;
overflow: hidden;
}
.double-image {
grid-area: 1 / 1 / -1 / -1;
background: url(1.jpg) no-repeat 50% 50%;
background-size: cover;
width: 100%;
height: 100%;
position: relative;
transition: clip-path 0.5s ease-in-out;
}
.double-image:nth-child(1) {
background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
transform: translate(1%, -1%) scale(0.94, 0.94);
}
.double-image:nth-child(2) {
background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
transform: translate(-0.0191%, 0%) scale(0.97, 0.97);
filter: saturate(400%) blur(5px);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.double-image:nth-child(3) {
background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition-delay: 0.2s; /* Add a delay for the third image */
}
</style><div class="image-container">
<div class="double-image"></div>
<div class="double-image"></div>
<div class="double-image"></div>
</div>I tried by myself, one is the clip-path effect is not working and the other is the shake effect.
And I want it to be the same effect that is on this website with javascript