CODEWITHSUNDEEP
javascriptcssimageimage-manipulationopacity
Phill Pafford
Phill Pafford

Reputation: 85318

CSS or JavaScript to highlight certain area of image opacity

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?

Upvotes: 4

Views: 17551

Answers (5)

Kristian
Kristian

Reputation: 2505

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>

Upvotes: 0

Jonathan Fingland
Jonathan Fingland

Reputation: 57167

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

Upvotes: 6

erickb
erickb

Reputation: 6309

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.

Upvotes: 3

zzzzBov
zzzzBov

Reputation: 179086

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.

Upvotes: 0

davin
davin

Reputation: 45545

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.

Upvotes: 0

Related Questions