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.

Answer 1

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);

Answer 2

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;
        }