style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80");
    background-size: cover;
    background-position: 20%;
    background-attachment: fixed;
    overflow: hidden;
}

section .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80");
    background-size: cover;
    background-position: 20%;
    background-attachment: fixed;
}

section .box:nth-child(1) {
    filter: blur(10px);
}

section .box:nth-child(2) {
    clip-path: circle(150px at var(--x) var(--y));
}

section .box h2 {
    position: absolute;
    color: #fff;
    font-size: 10em;
    transform: translate(0, 0);
}

.circle {
    position: absolute;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 25px rgba(0,0,0, 0.25);
    transform: translate(var(--x), var(--y));
}