CODEWITHSUNDEEP
htmlcssanimation
Randy
Randy

Reputation: 16677

Make one div slide over another using only CSS

I am attempting to have 2 divs of the same size, one is initially visible while the other (below?) is initially hidden.

I desire that when you hover over the first div, the other will animate and slide upward to fully cover the first. This one should remain in place until you stop hovering over the area.

I can get a second div to move upward on hover, but it has many unwanted effects - such as a jumpy/jittery behaviour when the second div is in place - and in this fiddle, the lower one begins visible.

http://jsfiddle.net/cc28samh/1/

the HTML

<div>
    <div id="stay-in-place">
        <h1>hello world</h1>
        <p>ipsum dolorum caveat emptor veni vidi vici</p>
    </div>
    <div id="move-in-to-place">
        <h2>I'm on top</h2>
    </div>
</div>

the style

<style type="text/css"> #stay-in-place {
    position:relative;
    height : 200px;
    width : 200px;
    background: red;
    -webkit-transition: height 1s, -webkit-transform 1s;
    transition: height 1s, transform 1s;
}
#stay-in-place:hover {
    height : 0px;
}
#move-in-to-place {
    position:absolute;
    height : 200px;
    width : 200px;
    background: blue;
}
</style>

Upvotes: 7

Views: 20405

Answers (2)

tongadall
tongadall

Reputation: 51

I made a improved version of http://jsfiddle.net/sdL1vead/ here http://jsfiddle.net/tongadall/trqj1qgo

html

<div class="box">
<div class="stay-in-place">
    <h1>hello world</h1>
    <p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div class="move-in-to-place">
    <span>I'm on top</span>
</div>
</div>

CSS

.stay-in-place {
    height: 100%;
    width: 100%;
    background: red;
    position: absolute;
}
.move-in-to-place {
    position: absolute;
    bottom: -100%;
    height : 100%;
    width : 100%;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    font-size: 12px;
    line-height: 1.2;
}
.box {
    margin: 2px;
    float: left;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.box:hover .move-in-to-place {
    bottom: 0;
    -webkit-transition: all 0.4s, -webkit-transform 0.4s;
    transition: all 0.4s, transform 0.4s;
    width: 100%;
    height: auto;
    opacity: 1;
}
.box:not(hover) .move-in-to-place {
    bottom: -100%;
    -webkit-transition: all 2s, -webkit-transform 2s;
    transition: all 2s, transform 2s;
    width: 100%;
    height: 0;
    opacity: 0;
}

Upvotes: 1

Christina
Christina

Reputation: 34652

This is what I think you want:

http://jsfiddle.net/8heq7w0b/

Better: http://jsfiddle.net/sdL1vead/

<div class="box">
<div id="stay-in-place">
    <h1>hello world</h1>
    <p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>

<div id="move-in-to-place">
    <h2>I'm on top</h2>
</div>
</div>

CSS

#stay-in-place {
    height: 100%;
    width: 100%;
    background: red;
    position: absolute;
}
#move-in-to-place {
    position: absolute;
    bottom: -100%;
    height : 100%;
    width : 100%;
    background: blue;
    opacity:0;
}
.box {
    position: relative;
    width:200px;
    height:200px;
    overflow:hidden;
}
.box:hover #move-in-to-place {
    bottom: 0;
    -webkit-transition: all 1s, -webkit-transform 1s;
    transition: all 1s, transform 1s;
    width:100%;
    height:100%;
    opacity:1;
}

Upvotes: 12

Related Questions