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

These are the steps you can take to highlight a part of an image:

1. Access the image in JavaScript, and dynamically add another identical image immediately after it. (this could be done just in HTML, but it would change the semantics of your markup)
2. Position the second image over the first image
3. Apply a css mask on the second image so that only the "highlighted" part shows up
4. When the user hovers over the images' container, adjust the opacity of the first image.

I can provide more technical details on this later if need be.