Change opacity of an area of an image

HTML & CSS
1

Hey guys,

I’m looking for a way to change the opacity of a particular area of an image. The images would be fetched dynamically.
Something like this:

800×600 200 KB

The circular area has higher opacity than the rest of the image.
One way of selecting area is image map but I don’t think I can style that.

I would appreciate any ideas.

2

You can’t change part of an image so your only options are to repeat the image with the one underneath having reduced opacity and the one on top fully opaque.

The simplest example would be something like this.

Of course if you want irregular shapes then you could try something like clip -path.

4 Likes
3

You sneaked in before I was ready with that.

4 Likes
4

Another way of doing that is to Cut Out the desired shape in Photoshop and saving it as PNG with transparency. Then you can add that image in HTML and add another one as a background in CSS to the same div.

Example:
transparent.png is an image with a circle cut out in the middle.
normal.jpg is the background.

HTML:
<div class="photo">
<img src="images/transparent.png">
</div>

CSS:
.photo {
   width: 300px;
   height: 300px;
   background: url('images/normal.jpg');
}
1 Like
5

Thanks! I went ahead with using clip-path.

6

Thank you! I used this approach. :slight_smile:

7

Unfortunately, Photoshop is not an option for me. I have to do it in the application itself.

8

Just one point I should have mentioned. This isn’t supported in current MS browsers. You may also want to use a -webkit- prefix for Safari.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.