Blur all except hovered

Question

I'm designing a simple static webpage, and wanted to do this neat little effect but ran into a problem.

What I want to do: Cover the screen with a photo. When a "invisible" container centered on the screen is hovered, blur background except the container.

I have 2 layers (div), 'bg' and 'overlay'. 'bg' contains an image that will fill the screen, while 'overlay' is width/height 600px/450px container at the center. If I only input 'overlay's size and position it will just be a see through container and it will look blurred when 'background' is blurred.

I could use the same photo as background in 'overlay', so that 'overlay' isn't see through, just a photo on top of the background. Problem here is that when i use background-size: cover on the 'bg', the overlay background photo does not match the 'bg' background photo when zoomed in/out (not responsive).

Any ideas how I can solve this?

Note: background-size: cover line 23 is slashed out

codepen

 :root { --url: url(https://i.imgur.com/2N39vV4.jpg); } body { margin: 0; padding: 0; } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--url); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transition: 1s; //background-size: cover; } .overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 37.5vw; height: 59.36675461741425vh; background: var(--url); background-position: center; background-repeat: no-repeat; z-index: 1; -webkit-transition: 1s; } .overlay:hover~.bg { -webkit-filter: blur(15px); } .overlay:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, .8); }

 <div class="bg"></div> <div class="overlay"></div>

Answer 1

Add to the .bg a pseudo element (the ::before ) that covers the screen, and has the same image, with the same position. Use clip-path() to cut a hole in the middle. When the overlay is hovered blur the ::before

 :root { --url: url(https://loremflickr.com/800/600); --c-width: 37.5vw; --c-height: 59.36675461741425vh; --c-left: calc(50% - var(--c-width) / 2); --c-right: calc(50% + var(--c-width) / 2); --c-top: calc(50% - var(--c-height) / 2); --c-bottom: calc(50% + var(--c-height) / 2); } body { margin: 0; padding: 0; } .bg, .bg::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--url) fixed no-repeat center; background-size: cover; } .bg::before { clip-path: polygon( 0% 0%, 0% 100%, var(--c-left) 100%, var(--c-left) var(--c-top), var(--c-right) var(--c-top), var(--c-right) var(--c-bottom), var(--c-left) var(--c-bottom), var(--c-left) 100%, 100% 100%, 100% 0% ); transition: filter 1s; transform-style: preserve-3d; content: ''; } .overlay { position: absolute; top: var(--c-top); left: var(--c-left); width: var(--c-width); height: var(--c-height); z-index: 2; transition: box-shadow 1s; } .overlay:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, .8); } .overlay:hover + .bg::before { filter: blur(15px); }

 <div class="overlay"></div> <div class="bg"></div>