Change opacity of an area of an image

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:

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.

What is you show the images twice on top of each other?
The bottom one could be a bit blurred while the top one has to the normal opacity.

You could create an extra div with the top image that has a circular form.

Maybe this might get you the desired result

I tried displaying two images with one on top of the another like this:

<img src="..." class="img1"/>
<img src="..." class="img2"/>

and style them like this:

img {
    position: absolute;

.img1 {
    opacity: 0.5;
    z-index: -1;

.img2 {
    opacity: 1;
    z-index: 1;

The image with the class ‘.img2’ is over the other one but I don’t understand what do to after this. :confused:

now decorate .img1 to make it blur and decorate .img2 in such a way that second image will look circular.

You should use css clip-path, here you have a few tutorials:

Tell us if it solve your problem!


Thanks! I ended up using clip-path to make it work but now I’m having another problem. :confused:

Thank you but I went ahead with pabloo87’s suggestion.