I am looking for a jQuery
plugin to expand div
elements so as to reveal their overflow (if any) on hover. Illustration:
The plugin should work on relatively positioned div
's (which I guess implies that you create a copy of the div
, set its positioning to absolute, then figure out where to place it).
Is there such a plugin already available out there?
You can actually do this entirely with css, this is a snipet from a website of mine, im entirly too lazy to edit it, but you get the idea:
css:
there are some not needed styles in there but again, you get the idea. basically youre just showing one image on top of the original, on hover
The images are missing here... but here is how I pulled this off a few years ago. The basic theory is that all of the images/div's whatever are absolute, inside of their own relative area. I then animate the
left & top
position both-negatively
. This makes them protrude above the surrounding boxes and look like they are popping out. (Of course you also need to make sure the z-index of this one is higher than the ones around it).jsFiddle DEMO
The styles I have for these two things are:
You don't need a plugin. Just add proper css and use jQuery animate:
demo here
If it is text, it is a little more complicated...
I use it like this:
thanks to @MarkPieszak. For dynamically created elements use
.hover()
does work only on static elements. more here