Expand / shrink div on hover / out with jQuery
Solution 1
You don't need a plugin. Just add proper css and use jQuery animate:
$div
.on('mouseenter', function(){
$(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
$(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})
Solution 2
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).
$(".img a img").hover(function() {
$(this).closest(".img").css("z-index", 1);
// this is where the popping out effect happens
$(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
}, function() {
$(this).closest(".img").css("z-index", 0);
$(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
});
The styles I have for these two things are:
.img {
position:relative;
z-index:0px;
}
.img a img {
position:absolute;
border:1px #1b346c solid;
background:#f1f1f1;
width:90px;
height:90px;
}
Solution 3
thanks to @MarkPieszak. For dynamically created elements use
$(document).on({
mouseenter: function () {
$(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
},
mouseleave: function () {
$(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
}
}, '.img a img');
.hover()
does work only on static elements. more here
![Max](https://i.stack.imgur.com/k8pTp.png?s=256&g=1)
Max
Analytics consultant available for hire. More info: https://maxcorbeau.com
Updated on July 21, 2022Comments
-
Max almost 2 years
I am looking for a
jQuery
plugin to expanddiv
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 thediv
, set its positioning to absolute, then figure out where to place it).Is there such a plugin already available out there?