How to use CSS to blur only the left half of an image?
I have a 900px wide div, #wrapper, positioned relatively. There are 2 divs that are positioned absolutely, I would like them to lay directly over #wrapper. The left div will hold text pulled from a database. The right div will hold nothing, perhaps it doesn't even need to exist.
The #left and #right divs lay beneath #wrapper, incorrectly, as you will see in my Pen. My more pressing question, however, is... is it possible to use the blur CSS property to blur only the portion of the image contained in #wrapper (which is full-width of the page) that is behind/under the area covered by #left. I want the site owner to be able to upload any full-width hero image, and have the left half of that image be blurred, so that the text laying over it will be more readable/visible. So far this code is what I've come up with, but it only blurs what is actually IN the #left div, not what is underneath. Not sure this is even possible. Maybe I need to use a filter?
https://codepen.io/emilysbca/pen/GBRezJ
The #left and #right divs lay beneath #wrapper, incorrectly, as you will see in my Pen. My more pressing question, however, is... is it possible to use the blur CSS property to blur only the portion of the image contained in #wrapper (which is full-width of the page) that is behind/under the area covered by #left. I want the site owner to be able to upload any full-width hero image, and have the left half of that image be blurred, so that the text laying over it will be more readable/visible. So far this code is what I've come up with, but it only blurs what is actually IN the #left div, not what is underneath. Not sure this is even possible. Maybe I need to use a filter?
https://codepen.io/emilysbca/pen/GBRezJ
Jan Louwerens
Instead of using an image tag for the background image, set the image as the background using css in the "left" and "right" divs. Have the "left" div show the left part of the image, and have the "right" div show the remaining right part of the image (using background-position). That way, you can still use blur on the "left" div, and since the left part of the image is the background of that div, the blur will apply.
ASKER
I ended up doing it by hand.... I took my full width image, used photoshop gaussian blur and a mask with gradient to create a subtle blur from left to right (see this tutorial: https://youtu.be/H8Lxg-ex3L4). Then I cropped left and right images. Until I find a better way, I'll do it this way.
ASKER
See my comment above.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.