Click here to Skip to main content
13,147,689 members (30,384 online)
Rate this:
Please Sign up or sign in to vote.
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?

Thanks for your help.
Posted 26-May-13 8:57am
Updated 26-May-13 9:00am
Tadit Dash 26-May-13 15:11pm
Please rename your profile name to remove the mail address, otherwise you may receive spams.

And please post the code or the online demo in jsfiddle, so that it will be easy to modify your code.
Zoltán Zörgő 26-May-13 16:02pm
If you don't want to get server side involved, I suppose only HTML5 (Canvas) is the only option.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

How about placing the "bottom" image on top instead of making it really underneath and when you select a rectangle setting its size to the size of the selected rectangle. Position of its background must match the rectangles offset and padding top and left to make it look as it was in the correct place.

This way you dont have to change the image itself just change few css properties.
Comments 28-May-13 2:23am
Thank u so much.. worked...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web03 | 2.8.170915.1 | Last Updated 26 May 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100