Wie kann ich einen Spotlight-Effekt erzeugen, der bei Mouseover einen Teil eines Bildes sichtbar macht?

Question

Ich muss einen Spotlight-ähnlichen Effekt erstellen, der dem Cursor im Abschnitt .header folgt.

Bei Mouseover würde ein runder 220px Bereich des header_bg.png Bildes sichtbar werden. Der Spotlight-Bereich würde sich mit dem Cursor bewegen, aber das Bild würde nicht - je nachdem, wo sich der Cursor befindet, würden Sie einen anderen Teil des Bildes sehen.

Ich sah mich um, konnte aber nichts finden, was so funktioniert, wie ich brauche (oder nah genug). Ich bin nicht großartig mit Jquery, so dass jede Hilfe geschätzt werden würde.

Danke!

Hier ist mein 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> 

mein css hier:

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; 
} 

Answer 1

Es gibt eine ähnliche Position, die wahrscheinlich einen guten Start geben könnte: durch

Creating a circular mouseover saturation effect

Ändern Sie ein wenig CSS auf seinem Demo, können Sie das Bild verdunkeln d nur zeigen, wo der Scheinwerfer ist:

ich gerade geändert:

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

zu:

background-color:black; 

Aktualisiert Geige:

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