CSS - image with overlays/background blurred diagonal

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

Solution

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>