HTML :

<div class="image-wrapper">
    <img class="image-1" src="../../all-css/imgTest/9.jpg" />
    <img class="image-2" src="../../all-css/imgTest/9.jpg" />
    <img class="image-3" src="../../all-css/imgTest/9.jpg" />
    <img class="image-4" src="../../all-css/imgTest/9.jpg" />
</div>

---

CSS :

<style>
    .image-wrapper {
        width: 600px;
        height: 400px;
        position: relative;
        margin: 30vh auto;
    }

    .image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: left;
    }

    .image-1 {
        clip-path: polygon(0 0, 0 32%, 28% 0);
        transform: translate(-10px, -10px);
        transition: transform 300ms ease;
        transform-origin: top;
    }

    .image-wrapper:hover .image-1 {
        transform: translate(0, 0);
    }

    .image-2 {
        clip-path: polygon(28% 0, 0 32%, 0 100%, 17% 100%, 90% 0);
        transform: translate(-30px, 5px);
        transition: transform 300ms ease;
    }

    .image-wrapper:hover .image-2 {
        transform: translate(0, 0);
    }

    .image-3 {
        clip-path: polygon(100% 0, 100% 65%, 74% 100%, 17% 100%, 90% 0);
        transform: translate(-15px, -10px);
        transition: transform 300ms ease;
    }

    .image-wrapper:hover .image-3 {
        transform: translate(0, 0);
    }

    .image-4 {
        clip-path: polygon(100% 65%, 74% 100%, 100% 100%);
        transform: translate(-32px, 5px);
        transition: transform 300ms ease;
        transform-origin: top;
    }

    .image-wrapper:hover .image-4 {
        transform: translate(0, 0);
    }
</style>

---