.box {
    width: 100vw;
    height: 50vh;
}

.image-box {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    margin: 0 auto;
}

.image-div {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 50vh;
    overflow: hidden;
    margin: 0 auto;
}

    .image-div img {
        opacity: 0;
        width: 100%;
        height: 100%; 
        display: block;
    }

.last-btn {
    position: absolute;
    background-color: #ffffff66;
    left: 0px;
    top: 0px;
    width: 50px;
    height:50vh;
    line-height: 50vh;
    font-size: 50px;
    transition: opacity .5s;
    opacity: 0;
    cursor: pointer;
}

.next-btn {
    position: absolute;
    background-color: #ffffff66;
    right: 0px;
    top: 0px;
    width: 50px;
    height: 50vh;
    line-height: 50vh;
    font-size: 50px;
    transition: opacity .5s;
    cursor: pointer;
    opacity: 0;
}

.image-box:hover > .last-btn {
    opacity: 1;
}

.image-box:hover > .next-btn {
    opacity: 1;
}