CSS实现图片hover扫光效果代码不生效的解决方法

问题描述 #

• 预期实现鼠标悬停图片时的斜向扫光交互，参考效果：
• 当前代码运行效果不符合预期，异常表现：

现有代码问题点 #

• 扫光伪元素的父容器.image未设置position: relative，绝对定位的伪元素定位基准错误
• 父容器未设置overflow: hidden，扫光元素超出图片范围的部分无法被裁剪
• 未编写:hover状态下的伪元素位移规则，鼠标移入时无法触发扫光动画
• 伪元素初始宽高、变换参数设置不合理，无法形成窄条斜向扫光的视觉效果
• 原HTML结构末尾多写了一个冗余的</div>闭合标签，可能导致布局错乱

完整修复代码 #

CSS部分 #

/* 图片容器基础设置 */
.image_block_1 .image-box .image {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
/* 扫光层基础样式 */
.image_block_1 .image-box .image::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 40%;
    height: 100%;
    /* 渐变背景实现柔化光带边缘 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transition: transform 0.9s ease;
    /* 初始状态：光带倾斜后移出图片左侧可视区 */
    transform: skewX(-25deg) translateX(-150%);
    z-index: 1;
    /* 禁止光带拦截鼠标交互 */
    pointer-events: none;
}
/* 悬停触发扫光位移 */
.image_block_1 .image-box .image:hover::before {
    transform: skewX(-25deg) translateX(350%);
}
/* 图片默认样式 */
.homeimg {
    display: block;
    max-width: 400px;
}

HTML部分（删除冗余闭合标签） #

<div class="image_block_1">
    <div class="image-box">
        <div class="image">
            <img src="./assets/images/About-1.jpg" alt="About-1" class="homeimg" loading="lazy">
        </div>
    </div>
</div>

实现说明 #

• 用skewX()将光带倾斜25度，比rotate旋转的效果更贴合常规扫光的斜切视觉
• 光带使用线性渐变背景，避免纯色块导致的生硬边界
• 父容器overflow: hidden保证光带仅在图片区域内可见，滑入滑出过程自然
• pointer-events: none属性避免上层的扫光层阻挡图片本身的点击、悬停交互

内容的提问来源于stack exchange，提问作者sara97