Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript jQuery CSS3
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.
Praveen.
Posted 26-May-13 9:57am
Edited 26-May-13 10:00am
v2
Comments
Tadit Dash at 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ő at 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
good
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.
  Permalink  
v2
Comments
praveena0989@gmail.com at 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
0 OriginalGriff 365
1 Sergey Alexandrovich Kryukov 319
2 CPallini 275
3 DamithSL 214
4 Maciej Los 185
0 OriginalGriff 5,455
1 DamithSL 4,457
2 Maciej Los 3,885
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,115


Advertise | Privacy | Mobile
Web02 | 2.8.141216.1 | Last Updated 26 May 2013
Copyright © CodeProject, 1999-2014
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