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

You could use background-position with absolutely positioned divs as follows:

CSS:

.container {
    position:relative;
    height:455px;
    width:606px;
}

.container div {
    position:absolute;
    background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}

.container .bg-image {
    opacity:0.3;
    height:455px;
    width:606px;
}

.container div.highlight-region {
    height:50px;
    width:50px;
    opacity:0;
}

.container div.highlight-region:hover {
    opacity:1;
}

HTML:

Please see http://jsfiddle.net/MT4T7/ for an example

Credit to beachphotos.com for using their image.

EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.

CSS changes:

.container div.highlight-region {
    height:50px;
    width:50px;
    border: 3px solid white;
}

/* removed :hover section */