Streaming live at 10am (PST)

Mouseover Flashlight interaction on Webflow

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!

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

Maybe try to find her ± the idea you want:

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

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

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).

2 Likes

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

1 Like

2 years later, but I came across this discussion as I was looking to do the same thing. Hopefully, this can help someone looking to do this in the future.

Add this your head tag and you will get what Ying has referenced.

<style>
/* Flashlight Overlay */
:root {
  cursor: none;
  --cursorX: 50vw;
  --cursorY: 50vh;
}
:root:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient(
    circle 10vmax at var(--cursorX) var(--cursorY),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 80%,
    rgba(255,255,255,1) 100%
  )
}
</style>

<script>
function update(e){
  var x = e.clientX || e.touches[0].clientX
  var y = e.clientY || e.touches[0].clientY

  document.documentElement.style.setProperty('--cursorX', x + 'px')
  document.documentElement.style.setProperty('--cursorY', y + 'px')
}

document.addEventListener('mousemove',update)
document.addEventListener('touchmove',update)
</script>

Preview in Weblfow: https://preview.webflow.com/preview/flashlight-cursor?utm_medium=preview_link&utm_source=designer&utm_content=flashlight-cursor&preview=98ff7f0fe3e9cb4b5cf4f493a8570b16&mode=preview

Preview in browser: https://flashlight-cursor.webflow.io/

2 Likes