Making a rectangular transparent portion in a image using css and jquery

[PSP]

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.

[Paulie_D]

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?

[dgriesel]

You can use html5 canvas for that effect.
http://codepen.io/anon/pen/jgcAv

I used CoffeeScript which is essentially JavaScript minus “{ ( ) } ;” plus a few extra features.
You should be able to read it, otherwise use http://js2coffee.org/#coffee2js 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.

[PSP]

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

I will frame my doubt in a more clear way:

This is my CSS

 #image{
   position:absolute;
  clip:rect(200px,300px,400px,100px);
 }

And this is my jquery.

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

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.

[dgriesel]

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 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_transitions#Detecting_the_completion_of_a_transition

[PSP]

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

[Author]

Posts