CSS Blend Mode – Chasing cursor Example

March 15, 2019

I came across a tutorial on SuperHi recently where they were demonstrating a simple enough piece of javascript that made a ball follow the mouse cursor around the screen with a nice delay effect – it didn’t just instantly snap to where the mouse was.

I loved it – thought it was a neat little effect but I wanted to take the idea on a little bit and add multiple layers and CSS blend modes.

Blend modes have been around in Photoshop for years, but they’re a relatively new thing to the web so I wanted to have a little play around with it.

I purposely chose a red, green and blue layer knowing it would produce white when overlapping each other. Give it a spin below and let me know what you think over on Twitter.

See the Pen CSS blend Modes – Delay hover move effect – Stolen from SuperHi by Sean Smyth (@sean_smyth) on CodePen.

If you enjoyed this post, do me a favour & share it with a friend who you think'll like it too. I'd very much appreciate it. Thanks!

Or if you like what you see, why not sign up to my newsletter?
A monthly roundup so you won't be bombarded. Pinkie promise :)

Sean Smyth Photo

Post by Seán Smyth

(That's me on the left above there)

I currently work as a Creative Designer & Email Marketing Specialist for Homestay.com. I'm also a Live Music Photographer and Social Manager for GoldenPlec.

Other Recent Posts