CSS or JavaScript to highlight certain area of image opacity

Question

I\'m looking to do something like this but with CSS or JavaScript.

I need to highlight a certain part of an image but everything I find is how to do it in Photoshop.

Answer 1

What about overlaying the cropped image (with 100% opacity) on top of the whole image (with 30% opacity)?

This answer is only a proof of concept

body {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
}
.img-base {
  opacity: 0.3;
  z-index: -99;
}
.img-overlay {
  opacity: 1.0;
}
.cropper{
  width: 150px; /* input width and height of the box here */
  height: 120px;
  overflow: hidden;
  position: relative;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  left: 90px; top: 170px; /* input starting location of the box here */
}
#overlay1 {
  position: absolute;
  left: 0px; right: 0px;
  margin-left: -90px; margin-top: -170px; /* input starting location of the box here */
}