CODEWITHSUNDEEP
jqueryhtmlcssstyles
Mihai Alin
Mihai Alin

Reputation: 89

Css + Jquery in order to achieve this overlap

My jsFiddle

I have 3 parents, that will contain an undefined number of children, (parents are floating) children are relative, the scheme looks like this:

-----Parent-----   ------Parent------  ----Parent----
|    Child     |   |     Child       | |   Child    |
|    Child     |   |     Child       | |   Child    |
|    Child     |   |     Child       | |   Child    |
|    Child     |   |     Child       | --------------
----------------   -------------------

On mouse over, children will resize to a bigger height, but i want them to overlap, i don't want to extend the parent.

My css looks like this:

    .parent{
    position:relative;
    float:left;
    width:296px;
    background-color:pink;
    margin-right:10px;
}

    .child{
        position:relative;
        height:60px;
        margin-bottom:10px;
        background-image:url("../images/theme_test.png");
    }

I tried to use top, the Y position but it is not working, the children bellow will go down.

Upvotes: 1

Views: 139

Answers (3)

Zach Saucier
Zach Saucier

Reputation: 26034

I edited Yotam's fiddle by implementing a couple if statements to prevent changing of the parent div's height (his would if you move quickly over from one to the other) and to prevent the children from being animated over and over sometimes if the mouse moves quickly from one to another. This is done by checking to see if another child in the column is currently being animated and not allowing animation until it is done: if(!animating). The only problem occurs if one moves quickly from one to another so the mouseenter occurs before the other stops animating. You can decide which you like better. Here is the jsFiddle

Using CSS would be awesome like Majky said would be awesome, that's how I would do it personally

Upvotes: 0

Majky
Majky

Reputation: 2013

I've done something similar in the past. You don't really need any javascript or jquery.

What you will need is to set relative position on every child (which you have done) and create inside every child another container with absolute position. Then just add some css code to change height of this container on hover and also to adjust z-index properly.

Update: I've updated your code posted before. Just used last-child css to move last child up instead of only increasing height. Result is same as using javascript, but personally i would avoid using JS when not needed.

Here is updated jsFiddle (Added transitions and border - looks nice :) )

CSS:

.parent{
    position:relative;
    float:left;
    width:100px;
    background-color:pink;
    margin-right:10px;
}
.child{
    position:relative;
    height: 60px;
    margin-bottom:10px;
}
.child > .content {
    position: absolute;
    width: 100%;
    height: 60px;
    background-color:cyan;
    z-index: 1;
}

.child:hover > .content {
    background: red;
    height: 100px;
    z-index: 2;
}

.child:last-child:hover > .content {
    height: 100px;
    bottom: 0px;
}

HTML:

<div class="parent">
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
</div>
<div class="parent">
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
</div>

Upvotes: 0

Yotam Omer
Yotam Omer

Reputation: 15376

There you go: jsFiddle.

I've updated the positions using margins and notice 2 things:

  1. I had to change the z-index so the hovered element will be on top
  2. I've created a special treatment for the last child - making it grow up instead of down so it won't make the parent longer

This is the mouseenter event:

$('.child').mouseenter(function() {
        $(this).css('z-index',5);
        if($(this).is(':last-child')){ // check if this is the last child
            $(this).animate({
                height: "80px",
                'margin-top': "-20px" // grow upwards..
            }, 250 );
        }else{
           $(this).animate({
                height: "80px",
                'margin-bottom': "-10px" // grow down wards..
            }, 250 );
        }
    })

mouseout is the exact opposite.

Upvotes: 2

Related Questions