On hover, DIV expands and overlaps others

Question

I am looking to do something very simple. I have many DIV boxes arranged in a grid. When I hover one of them, I want it to expand slowly, anchored from the middle, and then shrink back down. However, I have not been able to do so without the other DIV boxes being pushed aside. I want the DIV being hovered on to expand slowly, overlapping the other DIV boxes, without moving them. I have accomplished some of this with JQuery. Here is what I have:

CSS:

div{width: 100px; height: 100px; float: left;}
div#sq1{background-color: magenta;}
div#sq2{background-color: yellow;}
div#sq3{background-color: cyan;}

JQuery:

<script type='text/javascript' src='animated.js'></script>
<script type="text/javascript">
$(document).ready(function() {
    $("div").hover(function(){
        if (!$(this).hasClass('animated')) {
            $(this).dequeue().stop().animate({ width: "100px", height: "100px" });
    }
    }, function() {
        $(this).addClass('animated').animate({ width: "200px", height: "200px" }, "normal", "linear", function() {
        $(this).removeClass('animated').dequeue();
    });
});
</script>

HTML:

<div id="dequeue" class="blocks">
<div id="sq1"></div>
<div id="sq2"></div>
<div id="sq3"></div>
</div>

Here's how I want it to look: Before : http://i39.tinypic.com/dh9x87.png After: http://i44.tinypic.com/70cd35.png

Thanks!

I see nine boxes in the image and three boxes in the markup that you posted. this confuses me :) — akonsu, Apr 21 '12 at 03:56

LukeGT · Answer 1 · 2012-04-23T17:54:06.540

1

Try using negative margins to trick the page into thinking each box is still 100px x 100px. So in addition to animating the width and height from 100px to 200px, also animate the margin from 0 to -50px.

Hope this helps :)

EDIT

Here's a working example:

http://jsfiddle.net/sGDvj/1/

edited Apr 23 '12 at 17:54

answered Apr 21 '12 at 04:06

LukeGT

2,324
1
21
20

score 0 · Answer 2 · answered Apr 21 '12 at 04:05

I think I understand what you are trying to do :D although I do not have a 100% positive answer, I do have a suggestion, try playing around with the z-index of the divs, maybe make the one you are hovering over to somthing like 5 or whatever positive number you want!

score 0 · Answer 3 · answered Apr 21 '12 at 04:08

0

why not use absolute positions? or another way to do it is to create a duplicate div over the one that is hovered over and animate it instead.

answered Apr 21 '12 at 04:08

akonsu

28,824
33
119
194

score 0 · Answer 4 · answered Apr 23 '12 at 18:47

0

Just use CSS3 simple and easy

http://jsfiddle.net/mhkfH/

answered Apr 23 '12 at 18:47

Stian

45
7

1

Excellent, thanks! Here's a working example: http://jsfiddle.net/4uvfZ/ (Note the change to the first selector) – ShibbyUK Jun 19 '12 at 13:46

score 0 · Answer 5 · edited May 23 '17 at 12:12

0

Have a look at this http://jsfiddle.net/tdsNF/2/ and see Expand / shrink div on hover / out with jQuery for the credits.

edited May 23 '17 at 12:12

Community

1
1

answered Aug 21 '12 at 15:49

Max

12,794
30
90
142

score 0 · Answer 6 · edited May 23 '17 at 12:04

Take a look at this example; I think this is what you want to do. http://jsfiddle.net/tdsNF/2/

It is an expander with images, but divs will work as well, I believe.

Found it here: Expand / shrink div on hover / out with jQuery

var $imageWidth     = 92,    // with borders
$imageColumns    = 10;    // images across

$("#container > div .img").each(function(index) {
var $left = (index % $imageColumns * $imageWidth);
$(this).css("left", $left + "px");
});

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index", 1);
    $(this).stop(true,true).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
    $("#name").css("color", "#242424").html($(this).attr("data-name"));
    $("#school").css("color", "#242424").html($(this).attr("data-school"));
}, function() {
$(this).closest(".img").css("z-index", 0);
$(this).stop(true,true).animate({ height: "90", width: "90", left: "+=55", top: "+=55"     }, "fast");
});

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Mihai Iorga, Sep 27 '12 at 14:53
I suppose my SO etiquette is still a little unrefined. Thanks for the tip, good to know. — tamsanh, Sep 29 '12 at 11:21

On hover, DIV expands and overlaps others

6 Answers6