Replace content in div with other content using a slide up transition with jQuery

Question

I have 2 divs like the following:

<div id="content">
    Content 1
</div>
<div id="rollover-content" style="display: none;">
    Content 2
</div>

How can I make it so when the #content div is hovered over by the mouse the #rollover-content div does a 'slide up' transition effect and takes over. Then when the mouse is off of the div #content will slide back.

If you go to this demo and hover over the first tile you will see the effect I am looking for, but I am trying to do it with straight jQuery.

I created the following css class which is a nice container to create a card:

.card {
        position: relative;
        margin: 0.5rem 0 1rem 0;
        background-color: #F1F1F1;
        transition: box-shadow .25s;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        padding: 20px;
}

How can I do these transitions in a div with this class wrapped around it?

Answer 1

To achieve this you just need to wrap your content in a couple of divs. Firstly an outer div which is the same size as the content slides within it and has overflow: hidden to mask off content outside its bounds. Then another div inside that which holds all the slides to be moved up/down as you hover in and out. Then finally inside that you have your actual content. Here's an example:

<div class="container">
    <div class="slide">
        <div class="content" id="first">
            Content 1
        </div>
        <div class="content" id="second">
            Content 2
        </div>
    </div>
</div>

.container {
    width: 200px;
    height: 150px;
    overflow: hidden;
    position: relative;
}
.slide {
    position: absolute;
}
.content {
    width: 200px;
    height: 150px;
}

$('.container').hover(function(e) {
    var $container = $(this), 
        top = e.type == 'mouseenter' ? -$container.height() : 0;
    $container.find('.slide').stop(true).animate({
        top: top
    })
})

Working example

Alternatively you can do it in CSS alone, so long as the .content elements will always be the height defined in your CSS:

.slide:hover {
    top: -150px;
}

Working example

Answer 2

You don't need any jQuery for this. A couple of lines of CSS can already achieve this effect. A transition is set on .box-2 to do the effect.

 .box-container { background: blue; width: 200px; height: 400px; position: relative; overflow: hidden; } .box-1 { position: absolute; background: lightblue; width: 200px; height: 400px; top: 0; left: 0; } .box-2 { position: absolute; background: darkblue; color: white; width: 200px; height: 0; bottom: 0; left: 0; transition: height .4s ease-in-out; } .box-container:hover .box-2 { height: 400px; } 

 <div class="box-container"> <div class="box-1"> Hello </div> <div class="box-2"> New content </div> </div> </div>