SOURCE

const domBtn = document.querySelector('.btn');
const domMask = document.querySelector('.mask');
const domImgDetail = document.querySelector('.img-detail img');
const domImgList = document.querySelectorAll('.img-list img');

domBtn.addEventListener('click', toggleOpacity);
function toggleOpacity() {
    const isHideMask = domBtn.textContent === '隐藏遮罩'
    domBtn.textContent = isHideMask ? '显示遮罩' : '隐藏遮罩';
    domMask.setAttribute('class', isHideMask ? 'mask hide' : 'mask');
}

for(let i = 0; i < domImgList.length; i++) {
    domImgList[i].addEventListener('click', setImgUrl);
}
function setImgUrl(e){
    domImgDetail.src = e.target.src;
}

<div class="box">
    <div class="title">照片库</div>
    <div class="img-detail">
        <button class="btn">隐藏遮罩</button>
        <div class="mask"></div>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fk.zol-img.com.cn%2Fdcbbs%2F21302%2Fa21301390_s.jpg&refer=http%3A%2F%2Fk.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623463721&t=5a9e7655100904cd4d08eebebc8d8136">
    </div>
    <div class="img-list">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fk.zol-img.com.cn%2Fdcbbs%2F21302%2Fa21301390_s.jpg&refer=http%3A%2F%2Fk.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623463721&t=5a9e7655100904cd4d08eebebc8d8136">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F05%2F20150705002302_rZxwR.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623464196&t=751c3ddb854c6d1ea9c0df2ab1446c59">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2379240445,1746833455&fm=26&gp=0.jpg">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3057217935,1287718478&fm=26&gp=0.jpg">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.uczzd.cn%2F199314472576962485.jpg%3Fid%3D0&refer=http%3A%2F%2Fimage.uczzd.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623464755&t=56e73fbcb71f6a0d5a6b73db51dd6d68">
    </div>
</div>

.box {
    width: 500px;
    margin: 0 auto;
}

.title {
    font-size: 32px;
    text-align: center;
}

.img-detail {
    position: relative;
    font-size: 0;
}

.img-detail img {
    width: 100%;
}

.btn {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9
}

.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0;
}

.img-list {
    padding: 10px 0;
    font-size: 0;
    background: #000;
}

.img-list img {
    width: 100px;
    vertical-align: middle;
}