Question is pretty self explanatory. I want to create a sort of flashlight on a painting in a dark room effect. The only idea I had was to create a div that enpassed the whole screen except for a hole where the other div would be but that felt unnecessary. below is an example of what I'm trying to describe.

With the crossed out area being invisible to the user unless you move it within the grey div. I just want to be able to manipulate the bigger black div.

Question is pretty self explanatory. I want to create a sort of flashlight on a painting in a dark room effect. The only idea I had was to create a div that enpassed the whole screen except for a hole where the other div would be but that felt unnecessary. below is an example of what I'm trying to describe.

With the crossed out area being invisible to the user unless you move it within the grey div. I just want to be able to manipulate the bigger black div.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 24, 2014 at 17:18 user3786992user3786992 16722 silver badges1111 bronze badges 3

• 1 Why not use overflow:hidden on the outer div and position the inner div where you want it? – Casey Falk Commented Jul 24, 2014 at 17:20
• Also, adorable example image. – Casey Falk Commented Jul 24, 2014 at 17:20
• Maybe just create two black outer divs and move those from left to right and vice versa. That would be another way of facing your idea but it would do the same job. – 1' OR 1 -- Commented Jul 24, 2014 at 17:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You need 2 divs. One that contains the darkened image and one that contains the lightened image. The dark image div can be 100% width and height, and the BG should be scaled to fit.

The light image div can be any size. Its background should be scaled to the same proportions as the dark image (very important). Then onmousemove you can set the light BG to the opposite of the x,y position of the div. If the div is at 100,50 then the bg needs to be at -100,-50.

http://jsfiddle/gunderson/rG8zF/

Why not use overflow:hidden on the "flashlight" div and relatively position the inner div where you want it? The "room" div can then just be a black background that spans the screen.

Check out this Example Fiddle -- or, here's the gist: HTML:

<div id="room">
    <div id="flashlight">
        <div id="innerDiv">
            <img src="http://i.imgur./hK0Bje8.jpg" />
        </div>
    </div>
</div>

CSS:

#room {
    background-color:black;
}
#flashlight {
    position:relative;
    overflow:hidden;
    width:100px;
    margin:0 auto;
}
#innerDiv {
    position:relative;
    left:-220px;
}

---

Alternatively, you could achieve a similar effect by having two div blocks in front of the "room" (acting as your "peripheral boundaries" in a sense) as shown in this Fiddle.

---

Making this "dynamic" depends on which approach you take. It either will involve resizing the two "obstructing" div blocks (Ex. 2) or changing the relative position of the "inner" div (Ex. 1). That being said, you could also use a tool that was already created to achieve a similar goal.