SOURCE

<div class="item-list">
    <div><img src="https://s3.ax1x.com/2021/02/15/y6570P.jpg"></div>
    <div><img src="https://s3.ax1x.com/2021/02/15/y65IOI.jpg"></div>
    <div><img src="https://s3.ax1x.com/2021/02/15/y65Tmt.jpg"></div>
    <div><img src="https://s3.ax1x.com/2021/02/15/y6556A.jpg"></div>
    <div class="view"></div>
    <div class="frame"></div>
</div>



<!-- <img src="https://s3.ax1x.com/2021/02/15/y6570P.jpg">
<img src="https://s3.ax1x.com/2021/02/15/y65IOI.jpg">
<img src="https://s3.ax1x.com/2021/02/15/y65Tmt.jpg">
<img src="https://s3.ax1x.com/2021/02/15/y6556A.jpg"> -->

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* 图片变量 */
    --img-1: url('https://s3.ax1x.com/2021/02/15/y6570P.jpg'),
    --img-2: url('https://s3.ax1x.com/2021/02/15/y65IOI.jpg'),
    --img-3: url('https://s3.ax1x.com/2021/02/15/y65Tmt.jpg'),
    --img-4: url('https://s3.ax1x.com/2021/02/15/y6556A.jpg')

}

.item-list{
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 90vw;
    margin-top: 30px;
}

/* 大图 */
.item-list .view{
    position: absolute;
    width: 90vw;
    height: 40vh;
    background: url('https://s3.ax1x.com/2021/02/15/y6570P.jpg') no-repeat;
    /* background-size: 100% auto; */
    transition: background .3s ease;
}

.item-list>div:not(:nth-child(5)){
    margin-top: 33vh;
}

.item-list>div{
    height: 100px;
}

/* 边框 */
.item-list .frame{
    position: absolute;
    bottom: 19px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: calc((100% - 30px)/4);
    height: 62px;
    outline: 5px solid orange;
    transition: all .3s;
    pointer-events: none;
}

.item-list .frame::after{
    content: '';
    margin-top: -20px;
    width: 40px;
    height: 20px;
    background: orange;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.item-list>div:nth-child(1):hover ~ .view{
    background: url('https://s3.ax1x.com/2021/02/15/y6570P.jpg') no-repeat;
}

.item-list>div:nth-child(2):hover ~ .view{
    background: url('https://s3.ax1x.com/2021/02/15/y65IOI.jpg') no-repeat;
}
.item-list>div:nth-child(3):hover ~ .view{
    background: url('https://s3.ax1x.com/2021/02/15/y65Tmt.jpg') no-repeat;
}
.item-list>div:nth-child(4):hover ~ .view{
    background: url('https://s3.ax1x.com/2021/02/15/y6556A.jpg') no-repeat;
}
.item-list>div:nth-child(1):hover ~ .frame{
    left: 0;
}
.item-list>div:nth-child(2):hover ~ .frame{
    left: calc((100% - 30px)/4 + 10px);
}
.item-list>div:nth-child(3):hover ~ .frame{
    left: calc((100% - 30px)/2 + 20px);
}
.item-list>div:nth-child(4):hover ~ .frame{
    left: calc((100% - 30px)/4*3 + 30px);
}
.item-list>div>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}