Animated Image Border Effect with jQuery Plugin

Inset Border Effect – jQuery plugin that puts a border around the images, when the image is hovered, the border animates to the sides, revealing the whole image.

In plugin options you can easily set animation speed, border color, border type e.g. solid, dashed and more.

View DEMO

Image border effect - jQuery plugin

Easy to use, just:

$("img").insetBorder();

All Plugin options:

$("img").insetBorder({
  speed          : 1000,           // 1000 = 1 second, default 250
  borderColor    : "orangered",    // Default white (#ffffff)
  inset          : 10,             // Border width, default 10px
  borderType     : "solid",        // Border type, e.g. dashed
  outerClass     : "ibe_outer",    // Class name of outer wrap
  innerClass     : "ibe_inner"     // Class name of inner border
});
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>