Make part of a image transparent

[PSP]

Hi Guys,

Consider i have two images on my webpage(one over other, positioned using Z-index).
Now, I want to select part(in rectangular shape) of a top image, and that selected part should become transparent so that in that transparent area, I can see part of a below image.

I tried using many jquery cropping plugins but no use.
Is this impossible or Is there any way to do this using CSS,javascript and Jquery?

[Paulie_D]

Wouldn’t it just be simpler to edit the image?

[Kitty Giraudel]

There is no easy way to do this.

One way would be to create 4 elements with the same background and hide the image when you define an area on it:
_ the first one on the left of the selected area,
_ the second on the top of the selected area,
_ the third on the right of the selected area,
_ the fourth on the bottom of the selected area.

Not great tho.

[CrocoDillon]

Another way is put a cropped version of the image below on top of the top image, it creates the illusion part of the top image is transparent but it’s not. You can use clip or background properties for this.

[Kitty Giraudel]

Quick and dirty proof of concept: http://codepen.io/HugoGiraudel/pen/a91f77fdd127beb6bfd845c9890c5d7a.

[PSP]

Waw.. thanks to all….

[Author]

Posts