Эффект при наведении на изображение

Довольно-таки смелый hover эффект на изображении. При наведении происходит разделение блока на отдельные кусочки с общим фоном - картинкой.

HTML

<div class="image-hover-container">
    <div class='container'>
        <div class='middle'>
            <div class='bg-image lake-district'></div>
            <a href='https://www.cumbriatourism.org/'  target="_blank" class='overlay'>
                <p>Lake District</p>
                <p>Cumbria, uk</p>
                <p class='mobile-link'>Read More</p>
            </a>
        </div>
        <div class='bottom-right'>
            <div class='bg-image lake-district'></div>
        </div>
        <div class='bottom-left'>
            <div class='bg-image lake-district'></div>
        </div>
        
        <div class='top-left'>
            <div class='bg-image lake-district'></div>
        </div>
        <div class='top-right'>
            <div class='bg-image lake-district'></div>
        </div>
    </div>
</div>
<div class="image-hover-container">
    <div class='container'>
        <div class='middle'>
            <div class='bg-image lancaster'></div>
            <a href='https://www.visitlancashire.com/explore/lancaster' target="_blank" class='overlay'>
                <p>Lancaster</p>
                <p>Lancashire, uk</p>
                <p class='mobile-link'>Read More</p>
            </a>        
        </div>
        <div class='bottom-right'>
            <div class='bg-image lancaster'></div>
        </div>
        <div class='bottom-left'>
            <div class='bg-image lancaster'></div>
        </div>
        
        <div class='top-left'>
            <div class='bg-image lancaster'></div>
        </div>
        <div class='top-right'>
            <div class='bg-image lancaster'></div>
        </div>
    </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&family=Open+Sans&family=Roboto:wght@300&display=swap');

.image-hover-container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    .container {
        position: relative;
        height: 430px;
        width: 310px;
        margin: auto;
        display: -webkit-box;
        &:hover {
            > .bottom-right {
                top: 55%;
                left: 80%;
                box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
                width: 350px;            
            }
            > .middle {
                height: 90%;
                left: 5%;
                top: 5%;
                width: 90%;
                box-shadow: 0px 23px 33px rgba(0, 0, 0, 0.34);
                .overlay {
                    opacity: 1;
                    z-index: 1;

                    p:nth-child(1) {
                        padding-top: 0;
                    }
                }
            }
            > .top-left {
                left: -70px;
                top: -90px;
                width: 150px;
                box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
            }
            > .top-right {
                 left: 250px;
                 top: -90px;
                 width: 260px;
                 height: 280px;
                box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
            }
            > .bottom-left {
                left: -89%;
                top: 65%;
                width: 360px;
                box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
            }
        
        }
        .lancaster {
            background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lancaster-min.jpg) no-repeat;
            
        }
        .lake-district {
            background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-district-min.jpg) no-repeat;
        }
        .bg-image {
            background-size: cover;
            background-attachment: fixed;
            background-position: 10% 10%; 
        }
        .middle {
            transition: 500ms all;
             transition-delay: 0.25s;
            transition-timing-function: cubic-bezier(.17,.67,.33,.97);
            position: relative;
            margin: auto;
            height: 100%;
            width: 100%;
            
            margin: 0px;
            left: 0;
            top: 0;
            box-shadow: 0px 17px 23px rgba(0, 0, 0, 0.34);
            .bg-image {
                height: 100%;
                width: 100%;    
            }
            .overlay {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                z-index: 9;
                background: rgba(67, 27, 12, 0.75);
                display: flex;
                flex-direction: column;
                transition: 300ms all;
             transition-delay: 0.37s;
                opacity: 0;
                text-decoration: none;
                z-index: -1;
                p {
                    position: relative;
                    margin: auto;
                    color: #fff;
                    text-transform: uppercase;
                    font-family: 'Roboto', sans-serif;
                    font-size: 1.1em;
                    opacity: 0.8;
                    &:nth-child(1) {
                        margin-bottom: 4px !important;
                        padding-top: 30px;
                        transition: all 400ms;
                        transition-delay: 0.3s;
                    }
                    &:nth-child(2) {
                        margin-top: 4px !important;
                    }
                    
                }
                .mobile-link {
                    display: none;
                }
            }
        }
        .bottom-right {
            transition: 800ms all;
            transition-delay: 0.15s;
            transition-timing-function: cubic-bezier(.17,.67,.33,.97);
            position: absolute;
            left: 0%;
            top: 48%;
            width: 100%;
            box-shadow: 0px 37px 29px rgba(0, 0, 0, 0);
            z-index: 1;
            .bg-image {
                height: 220px;
                width: 100%;    
            }
        }
        .bottom-left {
            transition: 800ms all;
            transition-delay: 0.17s;
            transition-timing-function: cubic-bezier(.17,.67,.33,.97);
            position: absolute;
            left: 0%;
            top: 48%;
            width: 100%;
            z-index: 1;
            .bg-image {
                height: 220px;
                width: 100%;    
            }
        }
        
        .top-left {
            transition-timing-function: cubic-bezier(.17,.67,.33,.97);
            transition: 600ms all;
            transition-delay: 0.19s;
            position: absolute;
            left: 0%;
            top: 0%;
            width: 150px;
            z-index: 1;
            .bg-image {
                height: 220px;
                width: 100%;    
            }
            
            
        }
        .top-right {
            transition: 500ms all;
            transition-delay: 0.08s;
            position: absolute;
            left: 0%;
            top: 0%;
            width: 300px;
            height: 260px;
            z-index: 1;
            transition-timing-function: cubic-bezier(.17,.67,.33,.97);
            .bg-image {
                 float: right;
                 height: 100%;
                 width: 100%;
            }
        }    
    }
}

@media (max-width: 920px) {
    .image-hover-container {
        transform: scale(.8) translateX(0px);
        overflow: hidden;
        .overlay {
            p:nth-child(1) {
                 margin-top: 125px;
            }
            p:nth-child(2) {
                margin-bottom: 30px !important;
            }
            .mobile-link {
                display: block !important;
                margin-top: 0px !important;
            }
        }
        .bottom-right, .bottom-left, .top-left, .top-right {
            box-shadow: 0px 0px 0px !important;
        }
        
    }    
}
@media (max-width: 350px) {
    .bottom-right, .bottom-left, .top-left, .top-right {
        display: none !important;
    }
}