How can I highlight part of an image on a webpage?

Question

I want to mask out part of an image on a page, making part of the image darker so a highlighted portion stands out. (This is often used to preview the effect of the crop tool in photo editors.)

Currently, my plan involves loading two copies of the images on top of each other and using clip: rect(); to slice out of a portion of the top image. Is there a better way to handle this? I should also mention that my image is actually an animated GIF (oh dear ...)

I thought it best to figure this out before I started trying to update the crop with javascript.

CSS:

    .container {
        width: 1075px;
        margin: 10px;   
        border: 1px solid black;
        padding: 10px;
        overflow: auto;
    }

    .image-container {
        position: relative;
        clear: both;
        background-color:#eee;
    }

    .background{
        opacity:.40;
    }

    .highlight {
        position: absolute;
        top: 0px;
        left: 0px;
        clip: rect(126px 257px 197px 156px);
    }

HTML:

<div class="container">
<div class="image-container">
<img class="background" src="animate.gif" width="1075" height="605" />
<img class="highlight" src="animate.gif" width="1075" height="605" />
</div>
</div>

I found a little tutorial and it looks like they're using two copies of the image as well (the original image and the selection layer). net.tutsplus.com/tutorials/javascript-ajax/… So, I'm going with it, but if anybody has a better idea, I'd like to hear it. — Martin Burch
– Martin Burch, Commented Aug 6, 2012 at 19:32

guiligan · Accepted Answer · 2012-08-06 19:40:04Z

1

Position the image using position: absolute for each image. The layer above should be smaller then the bottom one. Than use background-position: x y;

Something like this:

#image1, #image2 {
    position: absolute;
    left: 0;
    top: 0;
    background: url('https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif')
}

#image1 {
    min-width: 276px !important;
    min-height 110px !important;
    opacity: 0.5;
}

#image2 {
    left: 251px;
    width: 25px;
    height: 110px;
    background-position: 100% 100%;
}

Look here an example: http://jsfiddle.net/8n3Rr/

answered Aug 6, 2012 at 19:40

guiligan

3474 silver badges17 bronze badges

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

Comments

Nikola K. · Accepted Answer · 2012-08-06 19:33:23Z

0

Try to position a <div> over the images, put a low opacity on it and a width or height half the size of the image.

edited Aug 6, 2012 at 19:33

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Aug 6, 2012 at 19:27

Tabetha Moe

1161 silver badge6 bronze badges

2 Comments

Martin Burch Over a year ago

Sorry, I think that's kind of the opposite of what I want to do. Check out the link in my comment for a better illustration of what I'm trying to do.

Nikola K. Over a year ago

I've reformulatted your answer. It was a question to the OP, but actually contains the solution. If you want to ask an OP to make a question more clear, use comments instead. btw, some example code would be nice.

Collectives™ on Stack Overflow

How can I highlight part of an image on a webpage?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related