jQuery Plugin To Mask Images with Polygonal Shape - polyclip

polyclip is a lightweight jQuery plugin used to mask/clip an image with a random polygonal shape using the clip-path CSS property.The polygon mask will expand on mouse hover so you can add some cool effects by using CSS3 transitions.

How to use it:

1. Include jQuery library and the jQuery polyclip plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.polyclip.js"></script>

2. Insert an image into your web page.

<img src="1.jpg" class="demo" width="300" height="200">

3. Call the plugin on the image and you're done.

$(function () {
$(".demo").polyClip();
});

4. Options to customize the polygon mask.

$(function () {
$(".demo").polyClip({
horizontalOffset: 15, // the horizontal offset in px or percent
verticalOffset: 15, // the vertical offset in px or percent
pixels: true, // whether to use pixel or percent
hover: true // whether to show the hover effect
});
});

5. Add a transition effect to the image when hover over.

.demo { transition: all 0.5s; }

---

This awesome jQuery plugin is developed by alexdeloy. For more Advanced Usages, please check the demo page or visit the official website.