Mouseover Flashlight interaction on Webflow

Design help Custom code
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!

flashlight
flashlight736×740 840 KB

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 Paper.js — Tool

5

Only by webflow custom code.

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

Related Q:
https://stackoverflow.com/questions/11250331/animated-image-mask-following-mouse-in-html

https://stackoverflow.com/questions/37090147/masking-an-image-to-make-it-a-view-like-binocular

Working Example:

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

2 Likes
6

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

1 Like
7

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/

3 Likes