Change opacity of an area of an image

Ionic Framework ionic-v3
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:

music_player_app___mobile
music_player_app___mobile.jpg800×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

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

3

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

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

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:

4

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

5

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


Tell us if it solve your problem!

3 Likes
6

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

7

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