This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image.
Simple:
$("img").insetBorder();
All 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 });
|
Default$(selector).insetBorder(); |
|
Big Border$(selector).insetBorder({ inset: 50 }); |
|
Colored Border$(selector).insetBorder({ borderColor: "#d8b231" }); |
|
Slower Speed$(selector).insetBorder({ speed: 500 }); |
|
Double Border$("selector").insetBorder({ borderType: "double" }); |
|
Rectangles$("selector").insetBorder(); |