*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --bg:#222
}
body{
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg);
    gap: 40px;
}
.box
{
    /* border: 2px solid yellow; */
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.box.one{
    background: url(img/persona1.jpeg);
    background-size: cover;
}
.box.two{
    background: url(img/persona2.jpg);
    background-size: cover;
}


.box::before{
    /* border: 2px solid greenyellow; */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 750px;
    background: linear-gradient(transparent, transparent 300px, var(--bg) 450px, var(--bg) 750px);
    z-index: 1;
    transition: 4s;
}
.box:hover::before{
    /* background: rebeccapurple; */
    top: -450px;    
}
.box.two::before{
    top: 0;
    left: 0;
    height: 100%;
    width: 750px;
    background: linear-gradient(90deg,transparent,transparent 300px,var(--bg) 450px,var(--bg) 750px);
}
.box.two:hover::before{    
    top: 0;
    left: -450px;
    background-size: cover;
}