.wrapperParallax{
    box-sizing: content-box; /* we do want the padding to push the content inside so the shadow is visible*/
    display: block;
    position: relative;
    width: 600px;
    height: 400px; 
    padding: 20px 20px 0 20px;
    overflow: hidden;
    margin: 30px
}

.boxParallax {
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transform: perspective(1500px);
    xbox-shadow: 25px 15px 0 rgba(0,0,0,.1);
     transition: all 300ms;
}

.boxParallax div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
}


.boxParallax div {
    background-repeat: no-repeat;
    background-size: 100%;
    
}



.boxParallax .foreground { transform: translateZ(100px) translateY(10px);  } /* foreground */
.boxParallax .paraText { transform: translateZ(60px) translateX(300) translateY(50); width: 50%; font-size: 36px; color: rgba(0,0,0,.8); font-weight: bold  } /* foreground */

.shine { transform: translateZ(0px);} /* shine layer */
.bg { transform: translateZ(-1px);}

.xxforeground:hover{
    width: 110%; left: -5%; height: 110%; top: -5%;
    backdrop-filter: blur(1px)
}


.boxParallax .shine {
    background: linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 80%)
}

.boxParallax  .shadow {
    background: rgba(0,0,0,.1);
    transform:  translateX(7px) translateY(15px) translateZ(-5px);
    xbox-shadow: 0 0 10px rgba(0,0,0, .1);
}