Create a blur effect (on video) and remove the blur on the part hovered

[jimmylet]

Hello all,

 

I'm looking for how to achieve a blur effect in front of a video. This blur effect must disappear on a limited surface on the part hovered.

 

Here is the result I would like to achieve with Greensock : https://revolution.themepunch.com/paintbrush-effect-add-on-for-wordpress/

 

Do you have an idea of how? Use an SVG? Canvas? I'm lost…

 

 

Thank you !

See the Pen NmxBZX by jimmylet (@jimmylet) on CodePen

[Carl]

That's a pretty cool effect. Not sure how they do it. I tried inspecting the page but it wasn't immediately apparent. Could probably take some time to dig through it all. 

[Jonathan]

Hello @jimmylet and welcome to the GreenSock forum!

 

Yes a cool effect indeed, i will take a crack. Based on inspecting that page.

• It has the main image that is stacked on the bottom.

• Then a <canvas> tag is stacked above the main image with an opaque blur that is either a transparent blur or it's a canvas sample copy of the main image with an added blur effect.

• So basically 2 layers stacked, of the main image on the bottom and the blurred canvas image on top.
   
• Then mouse movements are detected when hovering over the canvas image to reveal a paintbrush mask that allows full transparency so you see through the <canvas> tag and see the main image underneath.

That is what i got from inspecting that slider. I only saw the effect work in Chrome, but Firefox and MS edge did not show the slider for some reason, only Chrome did.

 

Happy Tweening!