body, html {

    width: 100%;

    height: 100%;

    display: flex;

}

​

.wrap {

    position: relative;

    width: 300px;

    height: 500px;

    background: url(https://www.wptunnel.com/wp-content/uploads/2021/07/wptunnel-hd-beautiful-wallpaper-4.jpg);

    background-size: cover;

    margin: auto;

    cursor: pointer;

    overflow: hidden;

}

​

.backdrop::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    backdrop-filter: grayscale(100%);

    z-index: 1;

    transition: .3s transform;

}

​

.backdrop:hover::before {

    transform: translate(100%, 0);

}

​

.filter {

    filter: grayscale(100%);

    transition: .3s filter;

}

​

.filter:hover {

    filter: grayscale(0);

}