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

Home Forums JavaScript Making a rectangular transparent portion in a image using css and jquery

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

    I am trying to make a rectangular transparent portion in a image using css and jquery.

    I tried clip property but I can not assign multiple clip property to one image.

    So I placed 4 images on behind the other and clipped particuler portions, now i can see rectangular hole in middle of the image.

    But i dont think this is the efficient way.

    Is there any other way.

    thanks in advance.


    Could you make a codepen?

    Frankly, if the image does not have transparency in the first place it’s VERY hard to add this back in later.

    Is there a reason you can’t just edit the image?


    You can use html5 canvas for that effect.

    I used CoffeeScript which is essentially JavaScript minus “{ ( ) } ;” plus a few extra features.
    You should be able to read it, otherwise use for a translation to JS. However that generates some funky loops and array stuff.

    The key function is makeAHole, which has an optional alpha value to make semi-transparent holes.


    I tired using canvas but my app is for mobile and canvas animation works horribly bad.. So now I am trying same thing with

    I will frame my doubt in a more clear way:

    This is my CSS


    And this is my jquery.

      $( "#image" ).click(function() {
            $( "#image" ).animate({
                                 }, 5000, function() {
                                                   alert("done");  // Animation complete.

    Yes, jquery increases the height but it increase whole image not only the clipped part. I want to enlarge only clipped part.
    I hope I am more clear now.


    I don’t really understand what your last post is all about ;)

    But especially when targeting mobile devices, you should prefer CSS animations/transitions to jQuery:

    $( "#image" ).click(function() {$(this).addClass("i-like-to-move-it-move-it");})
    #image {
        transition: height 1s ease-out;
    .i-like-to-move-it-move-it {
        height: 600px;

    If you want to do something after the transition ended, set a timeout or have a look at


    But this code animates complete image but i want animate part of image(want to increase height of a clipped part)

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