如何在mouseover上創建展示圖片部分的聚光燈效果？

我需要在.header部分中的光標後面創建類似Spotlight的效果。如何在mouseover上創建展示圖片部分的聚光燈效果？

在鼠標懸停時，header_bg.png圖像的圓形220px區域將變爲可見。聚光燈區域將隨光標移動，但圖像不會 - 因此取決於光標的位置，您會看到圖像的不同部分。

我環顧四周，但找不到任何符合我需要的方式（或足夠近距離）。我不擅長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; 
}

來源

2016-04-29 Barbee

的可能的複製[創建一個圓形鼠標懸停飽和效果]（http://stackoverflow.com/questions/15771396/creating-a-circular -mouseover飽和效果） – Trey

有一個類似的職位，或許可以給你一個良好的開端：

Creating a circular mouseover saturation effect

通過在他的演示中更改一點CSS可以使圖像變黑ð只顯示其中的焦點是：

我只是改變：

background: url(http://www.forestpath.org/test/misc/img/photos/photo003-640-480-desaturated.jpg) no-repeat 0 0;

到：

background-color:black;

更新小提琴：

http://jsfiddle.net/CkJXJ/70/

來源

2016-04-29 20:17:21 Trey

如何在mouseover上創建展示圖片部分的聚光燈效果？

回答

相關問題