Streaming live at 10am (PST)

Mouseover Flashlight interaction on Webflow


#1

Hi, I’m pretty new to Webflow and digital design world in general.

I want to build a mouseover flashlight on an image with a white background instead of using a completely black color. Ideally, when the mouse hovers certain area you will see the image. But I cannot find tutorials that teach me how to build it.

Anyone can help me I’m very appreciated!


#2

Flashlight” is very general term. Please add example (Or screenshot).

Maybe try to find her ± the idea you want:


#3

Added the GIF to specify the effect I wanted to use on Webflow. thx


#4

No, the website you shared they are just hovering over states not what I’m looking for… I want the effect follows the mouse. I think it would like Paper.js onMouseMove http://paperjs.org/reference/tool/#onmousemove


#5

Only by webflow custom code.

This is more Q for stackoverflow (Related to CSS & JS).

Related Q:

Working Example:
http://jsfiddle.net/gfZ5C/

But you should know a little code -or- work with a freelancer (Masks & Canvas are for Advanced).


#6

Thanks, custom code! This is definitely another learning curve for me… I’m going to skip this effect now.