The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Make part of a image transparent

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #45004

    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?


    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.


    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

    Waw.. thanks to all….

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.