CSS - image with overlays/background blurred diagonal - css

Question

I want that the parts that are "whited" to get the image blurred.
I've tried using pseudo elements ::after and ::before to add the overlays but could only blurred the overlay.
tried with borders 2nd example codepen, but no sucess because with the transparent it creates a "square".
https://codepen.io/giventofly/pen/RQpqYZ
.hero-image {
width: 1280px;
height: 800px;
background-image: linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0), linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0), linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
url('https://cdn.vox-cdn.com/thumbor/NU6lcSN3DGmjF7NhZp6ixY3HxgQ=/0x0:1620x1080/1200x800/filters:focal(0x0:1620x1080)/cdn.vox-cdn.com/uploads/chorus_image/image/46510678/Tarmogoyf_DGM_1920x1080_Wallpaper.0.0.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 10;
}
<div class="hero-image"></div>
I only want to blur the part of the image that is "behind" the white linear-gradient

Answer 1

I'm sure someone can refine this approach a bit, but the main takeaways are:
Include the image twice in a container element.
Stack the two images.
Blur one and place it on the bottom.
Use clip-path on the top image to display the non-blurred region.
Insert a frost layer (transparent white) with a pseudo element of the container element between the two images.
Control layering with positioning and z-index.
.img-overlay {
display: inline-flex;
position: relative;
overflow: hidden;
}
.img-overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba( 255, 255, 255, 0.5 );
z-index: 1;
}
.img-overlay img:first-child {
position: absolute;
top: 0;
left: 0;
filter: blur( 3px);
z-index: 0;
}
.img-overlay img:last-child {
position: relative;
z-index: 2;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
<div class="img-overlay">
<img src="http://unsplash.it/400/400?image=16">
<img src="http://unsplash.it/400/400?image=16">
</div>

Answer 2

You can use clip-path for this. The idea is to have two similar layer, the top with the clip-path to show only the needed part and keep the blur on the bottom layer visible. You can switch the blur between both element if you want to blur the middle part instead:
.hero-image {
width: 600px;
height: 250px;
position: relative;
overflow: hidden;
}
.hero-image:after,
.hero-image:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: center/cover no-repeat;
background-image:
linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0),
linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0),
linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
url('https://picsum.photos/id/1024/800/800');
}
.hero-image:before {
filter: blur(4px);
}
.hero-image:after {
clip-path: polygon(45% 0, 97% 0, 68% 100%, 16% 100%);
}
<div class="hero-image"></div>