Animated Image Border Effect with jQuery Plugin

/ 0 Comments / Category: jQuery/Tags: effectsSave

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

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
});