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. 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?

Jonathan Fingland · Accepted Answer · 2011-02-25 17:10:42Z

6

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

edited Feb 25, 2011 at 17:10

answered Feb 25, 2011 at 15:58

Jonathan Fingland

57.3k11 gold badges89 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Phill Pafford Over a year ago

Thanks, Yeah I want the image to highlight a certain part while the rest is darker but transparent. I need one image as it's for a mobile site and I want to cut down on load time.

Jonathan Fingland Over a year ago

I just edited out the first two as the last one was best. included is a link to a working example. please note that in my example the regions only highlight on hover.

Jonathan Fingland Over a year ago

added an "always-on" region as well

Phill Pafford Over a year ago

This is exactly what I want but without the hover: jsfiddle.net/MT4T7 Can you also see my update to the question?

Jonathan Fingland Over a year ago

yeah. I see you need it for mobile. in which case the hover aspect is un-needed. you just need the highlight region to be appropriately positioned (no opacity changes)

|

erickb · Accepted Answer · 2011-02-25 16:25:48Z

3

You can probably fake it, here is a sample: http://jsfiddle.net/erick/JMBFS/3/

I covered the image with an opaque element. The color of the element is the same as the background of the image. Used z-index to put it on top.

answered Feb 25, 2011 at 16:25

erickb

6,3094 gold badges27 silver badges19 bronze badges

2 Comments

Phill Pafford Over a year ago

I like this method but I have another follow up question. This is for a mobile device, how do I code it for portrait and landscape views? and on multiple devices such as iOS, iPad, Android, etc...

erickb Over a year ago

In the sample code, the image should always end up on the top-left corner regardless of orientation, as long as your implementing on an HTML. If you are working on a native iOS or native Android app, I really can't help much as I don't work on those platforms(yet).

davin · Accepted Answer · 2011-02-25 16:01:44Z

0

You sure can. For example, most crop plugins provide "highlighting" as the basis of their UI. So for a complete cross-browser solution, just use an existing plugin, like Jcrop.

Of course, you might want it to be fixed, in which case you can programmatically tell the plugin which section to highlight and that the user shouldn't be able to move it, and then it will act as a highlighter, not a cropper.

answered Feb 25, 2011 at 16:01

davin

45.6k9 gold badges81 silver badges78 bronze badges

Comments

zzzzBov · Accepted Answer · 2011-02-25 16:13:35Z

0

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

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)
Position the second image over the first image
Apply a css mask on the second image so that only the "highlighted" part shows up
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.

answered Feb 25, 2011 at 16:13

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Comments

Kristian · Accepted Answer · 2020-03-11 09:03:00Z

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

<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"  class="img img-base">

<div class="cropper">
  <img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"  class="img img-overlay" id="overlay1">
</div>

Collectives™ on Stack Overflow

CSS or JavaScript to highlight certain area of image opacity

5 Answers 5

6 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related