discover blur - hover to reveal
i've realised this is such a powerful visual effect we can apply in
different ways.
And importantly we can animate it!
discover blur - hover to reveal
distance reveal
On scroll blur?
i like how high blur almost desintegrates / hides
the image, and it unblurs into existence
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid praesentium quae ex optio beatae voluptate tempore animi sunt, veniam ullam sapiente minus! Labore dolore mollitia facilis voluptate. Veritatis, ea nulla!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid praesentium quae ex optio beatae voluptate tempore animi sunt, veniam ullam sapiente minus! Labore dolore mollitia facilis voluptate. Veritatis, ea nulla!
cursor blur
tricky... we can only blur the content INSIDE the blurred element. so we
need to double everything. show an unblurred image, and then only show a
portion of the blurred image.
note - also added a white background, else the blur is partly transparent
at the edges.
but then we think - there must be a better way!
so i came across blur-gradient. Holy mackerel. so this works completely
opposite, instead of blurring dom CONTENT, we can use backdrop-filter to
blur anything BEHIND and element! and it can also be combined with
mask-image, to only blur parts, or fade the blur in and out.
here is a blur-gradient from left to right.
so can we also do a focus blur by using a radial gradient!
so this is what i was hoping for, easily blur anything you want, dynamically. and we can smooth the edges by creating the right mask-image with gradients.