如何创建在鼠标悬停时显示部分图像的聚光灯效果？答案

【问题标题】：How can I create a spotlight effect that reveals part of an image on mouseover?如何创建在鼠标悬停时显示部分图像的聚光灯效果？
【发布时间】：2016-04-29 20:11:08
【问题描述】：

我需要在 .header 部分中创建一个跟随光标的类似聚光灯的效果。

鼠标悬停时，header_bg.png 图像的圆形 220 像素区域将变得可见。聚光灯区域会随着光标移动，但图像不会 - 因此根据光标所在的位置，您会看到图像的不同部分。

我环顾四周，但找不到任何符合我需要（或足够接近）的方法。我对 jquery 不是很好，所以任何帮助将不胜感激。

谢谢！

这是我的 HTML：

<section class="header" style="background-image: url("/img/header_erp.jpg");">
    <div class="container">
        <h1 class="large-h1 text-white">here's some text</h1>
    </div>
</section>

这是我的 CSS：

section.header {
    padding: 0;
    position: relative;
    height: 450px;
    overflow: hidden;
    background-size: cover;
}
.header:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("/img/header_bg.png");
    opacity: 0.5;
}

【问题讨论】：

Creating a circular mouseover saturation effect的可能重复

标签： jquery css

【解决方案1】：

有一个类似的帖子可能会给你一个好的开始：

Creating a circular mouseover saturation effect

通过在他的演示中更改一点 CSS，您可以使图像变黑并只显示聚光灯的位置：

我刚换了：

background: url(https://picsum.photos/640/480) no-repeat 0 0;

到：

background-color:black;

更新小提琴：

http://jsfiddle.net/zaphod42/ndb2xhfg/

【讨论】：