opacity css

Question

Hi everyone, I'm trying to figure out what would be the simplest way perhaps with or without JavaScript of doing something like this.

http://tools.uvumi.com/crop.html

Where we see that the opacity is on the main image but the transparency is on the moving object.

Any suggestions

Thanks

Answer 1

Two possibilities:

1. You overlay two elements with the image as the background, with the element in the background having an opacity < 1. As the user adjusts the element in the foreground, you modify the background position by javascript. Probable issue: small sync-up issues are likely due to low frame rate rounding error while adjusting the background positioning

2. You have just one element with the image as a background, and you overlay 4 black elements with an opacity close to 0 (one each for the top boundary, left boundary, etc). The user control then adjusts the size and positioning of these elements.