Apply filter to only part of image

Question

I have an image in the background of my site and would like to apply the filter brightness throughout the image with the exception of a part as shown in the image:

Any tips on how to do this? I’ve tried tag map, but it serves only to mark sectors of the image, without the possibility of changing the style.

Answer 1

To solve this problem, and using the filter brightness, we can use the property clip:

The clip property allows you to specify a rectangle for cut an absolutely positioned element. The rectangle is specified as four coordinates, all from the top corner left of the element to be cut.

As I did not read the question correctly, I did the reverse that you asked, ie the track have filter brightness:

.brightness div{ 
  position:absolute;
  overflow:hidden;

} 

#filter img{
-webkit-filter:brightness(200%);
        filter:brightness(200%);
		
}
#filter{ 
  position:absolute;
  clip: rect(30px, auto, 90px, auto); 
/*   (top, right, bottom, left) */
}

<div class="brightness">
  <div id="original">
    <img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg">    
  </div>
  <div id="filter">
    <img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg">
  </div>
</div>

Then I did what you want to do:

.brightness div{ 
  position:absolute;
  overflow:hidden;
} 

#noFilter{ 
  position:absolute;
  clip: rect(30px, auto, 90px, auto); 
/*   (top, right, bottom, left) */
}

#original img{
-webkit-filter:brightness(200%);
        filter:brightness(200%);
		
}

<div class="brightness">
  <div id="original">
    <img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg">    
  </div>
  <div id="noFilter">
    <img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg">
  </div>
</div>

Answer 2

Why not add two <div> with opacity on the image?

<style>
div{
  position:absolute;
  top:0px;
  left:0px;
  height: 300px;
  width: 400px;
}
#imagem{
  background-image: url('http://assets.dornob.com/wp-content/uploads/2009/08/dining-room-desk-table.jpg');
}
.transparencia{
  background-color: #fff;
  opacity: 0.8;
  filter: alpha(opacity=50);
}
.quadro1{
  top:0px;
  height:60px;
}
.quadro2{
  top:140px;
  height:160px;
}
</style>

<div id="imagem" />
<div class="transparencia quadro1" ></div>
<div class="transparencia quadro2"></div>