jquery.overlay

Description

This jQuery plugin offers a very basic box-model overlay via CSS. When an element is hovered, appropriate margin/border/padding/content overlay boxes are displayed, in a similar manner to Firebug’s ‘Box model shading’. Whilst the Firebug approach is useful for design debugging, jquery.overlay comes in handy for CSS tutorials and demonstrations. For a practical example, see the ‘Margin after float’ article.

Usage

To enable an element to display its overlay on hover:

$('div').overlay();

To add a ‘static’ overlay (like the one at the top of this page):

add_overlay('div');

Source code

Get it from github here.

Examples

No styling

Padding

Margin

Border

Padding and Margin

Padding and Border

Margin and Border

Padding, Margin, and Border

Comments

Thu 22 Jul 2010 21:21

Jason said:

You’re a flipping legend mate. This is great. Exactly what I was looking for!