css 如何实现鼠标悬停图片变亮的效果?

https://mdbootstrap.com/docs/b4/jquery/javascript/lightbox

这个网站上的效果是怎么实现的? 问题关键: 图片和遮罩重叠, 而且遮罩在图片的上面, 导致点击不到图片

目前项目中用到了 viewer.js 插件, 是一个图片查看器, 通过点击图片来触发一个弹窗我原先想的是在图片上面加一层 before 伪类, 实现悬停显示半透明白色背景, 代码如下

.item > .image:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: all .5s;
}

.item > .image:hover:before {
    background-color: rgba(var(--rxc-light-rgb), .3);
}

html 结构如下

`<div class="item col-12 col-md-6 col-xl-4 mb-5">
    <div class="image mb-2">
        <img src="../images/seek-advice-from-photo/${item.src}" class="w-100 h-100">
    </div>
    <div class="text">
        <div class="title font-weight-bold part-fs-lg">${item.title}</div>
        <div class="date part-fs-md text-black-50">${dateString}</div>
    </div>
</div>`

但是在悬停的时候, 恰好那层半透明白色背景挡在了图片前面, 导致鼠标无法点击到图片, 也触发不了 viewer.js 图片查看的事件