Playing with CSS Transitions

HTML

<div>Content before slider</div>
<div class="container">
    <div class="one">Hover me to reveal new div.</div>
    <div class="two">I slid!<br>And I am higher than the div before me...<br/>Click me to close.</div>
</div>
<div>Content after slider</div>

CSS

.container {
    overflow:hidden;
 }

.one {
    background-color: lightblue;
    z-index: 1;
}

.two {
    background-color: yellow;
    z-index: -1;
    max-height: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.container.open {
    
}
.container.open .two {
    max-height: 100px;
}

JavaScript

$('.container').hover(function() {
    $('.container').addClass('open');
}, function() {
    // nothing here
});

$('.two').click(function() {
    $('.container').removeClass('open');
});