Increasing dimensions on hover without changing the position of other elements

Question

Suppose I've 10 divs in the form of squares. Lets call it the home page. Out of these 10, 3 divs have class .event1 5 divs have class .event2 2 divs have class .event3

<div class="boxes event1">
   ....//3-times
   ....                
</div>
<div class="boxes event2">
   ....//5-times
   ....                
</div>
<div class="boxes event3">
   ....//2-times
   ....                
</div>

The boxes are placed next to one another.

When I click event1, all box fadeout except those having the class event1. Similarly, for all classes. On clicking home, all boxes will again fade in.

<div id="navi">
    <a href="#"><div id="t0"><span>Home</span></div></a>
    <a href="#"><span>Event1</span></a>
    <a href="#"><span>Event2</span></a>
    <a href="#"><span>Event3</span></a>
</div>

My JQuery code for fadeOut:

<script type="text/javascript">
    $(function () {
        $('#t0').click(function() {
            $("*").animate({ 
                opacity: 1.0
                }, 500 );
        });
        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();
            if (c!="home"){
                $('.' + c).animate({ 
                   opacity: 1.0
                 }, 500 ).addClass('w1');
                $('.boxes').not('.' + c).animate({ 
                   opacity: 0.0
                 }, 500 );
            }
        });
    });
</script>

CSS for the classes:

.boxes, .event1, .event2, .event3 {
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:100px;
    height:100px;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}


   .w1:hover{
        background:rgba(0, 0, 0, .30);
        float:left;
        width:200px;
        height:200px;
        position:absolute;
        overflow:hidden;
        box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
        -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
        -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    }

Now I want to make only a particular box increase in size (width:200px; height:200px), when the mouse pointer is hovered. I can't find a way to do it.

When I'm adding the class .w1 in javascript code, it is being applied to all the elements having class event1 or event2 or event3 (whichever one was selected). So, when I'm hovering to a particular box of that class (which was selected), all the boxes undergo transition and the boxes shift.

I want only one box to change dimensions while the other boxes are at their original place. Also, this hovering event has to be activated for a particular event so that one can't hover on elements when home is selected. I even tried doing this by changing z-index but the page got pretty messed up.

You can use css3 transformations for this purpose. It would be easy and clean. — , Jan 05 '13 at 11:08
I knew a good one, but can't find it. This one looks ok, though. Check out the CSS of the menu it uses. http://www.the-art-of-web.com/css/css-animation/ — , Jan 05 '13 at 11:14
@xan: Each box has a margin in your CSS. So if one box resizes, wouldn't the other boxes move, to maintain that margin? Did you try removing the margin property? — sanjeev mk, Jan 05 '13 at 11:16
@sanjeevmk: Yes, I did try that one too. What happened was that as the `w1` was `absolute` positioned, hence, it distorted the whole page. — xan, Jan 05 '13 at 11:23
These answers suggest 1. The use of .children() selector 2. Use .parent() and work back downwards. http://stackoverflow.com/questions/1740071/how-to-animate-one-child-but-not-others-using-jquery http://stackoverflow.com/questions/6347016/apply-function-to-only-one-div-class-not-all — sanjeev mk, Jan 05 '13 at 11:54
@xan Transforms do not work on any IE older than 9. If you want to support older browsers, you could to first set position absolute on the element that has to pop out, place a dummy element with same dimensions in its place, and then do the resizing animation. — , Jan 05 '13 at 13:20

Alex · Answer 1 · 2013-01-05T12:45:45.910

1

Maybe this is what you are looking for:

        .w1:hover{
            <!--Removed the position absolute-->
            background:rgba(0, 0, 0, .30);
            float:left;
            width:200px;
            height:200px;
            overflow:hidden;
            box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            margin-bottom: -100px;
        }
        .w1:hover +div{
            margin-left: -100px;
        }

edited Jan 05 '13 at 12:45

answered Jan 05 '13 at 11:58

Alex

2,106
16
15

This doesn't help. As the box being increased stays there but as its size is increasing, it shift all the elements on right and bottom which disrupts the whole page. – xan Jan 05 '13 at 12:21
It doesn't do, when i try it. I build a jsfiddle for the tests: http://jsfiddle.net/fpMUU/1/ – Alex Jan 05 '13 at 12:24
It does in mine. I'm using Chrome. I clicked `event2` and then the 2nd box on the 2nd row. The boxes underwent a shift. – xan Jan 05 '13 at 12:33
They were all in one row when i tried it. Added a margin-bottom:-100px to the .w1:hover class. Maybe you want to try it again: http://jsfiddle.net/fpMUU/2/ . There is still a problem with the last element in each row. After the resize it doesn't fit into the row anymore. – Alex Jan 05 '13 at 12:49

Alex · Accepted Answer · 2013-01-08T13:10:40.967

I felt free to rebuild your project. Instead of css i use javascript in this example. The main point of this example is, that i do not resize the existing box. I build a new div, copy the content of the old div, position it absolute and set the opacity of the old one to 0. jsfiddle link: http://jsfiddle.net/56yeQ/8/

html:

     <div id="navi">
        <a href="#"><div id="t0"><span>Home</span></div></a>
        <a href="#"><span>Event1</span></a>
        <a href="#"><span>Event2</span></a>
        <a href="#"><span>Event3</span></a>
    </div>
    <div class="boxes event1">
        1
    </div>
    <div class="boxes event1">
        2
    </div>
    <div class="boxes event1">
        3
    </div>
    <div class="boxes event2">
        4
    </div>
    <div class="boxes event2">
        5
    </div>
    <div class="boxes event2">
        6
    </div>
    <div class="boxes event2">
        7
    </div>
    <div class="boxes event2">
        8
    </div>
    <div class="boxes event3">
        9
    </div>
    <div class="boxes event3">
        10
    </div>

css:

        .boxes, .event1, .event2, .event3 {
            background:rgba(0, 0, 0, .30);
            float:left;
            position:relative;
            overflow:hidden;
            width:100px;
            height:100px;
            margin:2px;
            box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
        }

        .w1{
            background:rgba(0, 0, 0, .30);
            float:left;
            width:100px;
            height:100px;
            position:absolute;
            overflow:hidden;
            margin: 2px;
            box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            opacity: 1;
        }

javascript:

       var isHome = true;

        $(function () {

            $("#navi a").click(function() {
                c = $(this).text().toLowerCase();
                isHome = c=="home";
                if (isHome){
                    $("*").animate({ 
                        opacity: 1.0
                    }, 500 );
                } else {
                    $('.boxes').not('.' + c).animate({ 
                        opacity: 0.0
                    }, 500 );
                    $('.' + c).animate({ 
                        opacity: 1.0
                    }, 500 )
                }
            });
        });

        function hoverIn(element){

            if(!isHome && $(this).css("opacity")==1){
                $(".w1").each(function(i){
                    var oldDiv= $(this).data("oldDiv");
                    $(oldDiv).css({opacity:1});
                    $(this).remove(); 
                });
                var posX = $(this).position().left+2;
                var posY = $(this).position().top+2;
                var newDiv = $("<div>").html($(this).html());
                $(newDiv).mouseleave(hoverOut);
                $(newDiv).addClass("w1");
                $("body").append(newDiv);
                $(this).css({opacity: 0});
                $(newDiv).offset({top:posY, left: posX});
                $(newDiv).data("oldDiv",this);
                $(newDiv).animate({height:"200px",width:"200px"},500);
            }
        }

        function hoverOut(element){

             var oldDiv= $(this).data("oldDiv");
             $(oldDiv).css({opacity:1});

             $(this).remove();
        }

        $(".boxes").mouseenter(hoverIn);

Is there any way of showing a smooth transition with respect to the increasing size? I tried doing `$(newDiv).addClass("w1").animate({height:"200px"},500);`, but there a `1 second` gap that is visible. — xan, Jan 07 '13 at 12:03

Increasing dimensions on hover without changing the position of other elements

2 Answers2

Linked