Question

139

CSS or JavaScript to highlight certain area of image opacity

rated 0 times [ 140] [ 1] / answers: 1 / hits: 16350 / 14 Years ago, fri, february 25, 2011, 12:00:00

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. Can I do this with CSS or maybe JavaScript?

Am I even asking the right question?

EDIT:

Well here is a great submission but I have a follow up question:

I need this for a mobile device and portrait and landscape views as well for many devices like: iOS, iPad, Android, WebOS, Etc... So the fixed position I'm not sure will work.

Any advice?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 14 Years ago maya · Accepted Answer

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:

<div class=container>

    <div class=bg-image></div>

    <div class=highlight-region style=top:50px;left:50px;background-position: -50px -50px;></div>

    <div class=highlight-region style=top:150px;left:150px;background-position: -150px -150px;></div>

</div>

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 */