CODEWITHSUNDEEP
htmlcssshow-hide
mrmason
mrmason

Reputation: 119

css3 slide up transistion

Hi I've got a Div I wont to expose on Click of a link, it reveals a pop up at the bottom of the page... at the moment it looks like this: http://jsfiddle.net/XPJC5/

body{margin:0;}
#lightbox {
        display:none;
        position:absolute;
        bottom:5px;
        z-index:1000;
        width:100%;
        background-color:#09F;
        height:50px;
        float:left;
        font-family: 'helvetica_bqregular';
        font-size:20px;
        line-height:65px;
        color:#FFF;
        text-align:center;
            }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

 #lightbox:target {
         display:block;
      }

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a>
<div id="lightbox">

          <div style=" background-color:#CBE376; width:100%; line-height:65px; height:65px; border-bottom:solid #999 thin; -webkit-box-shadow:  4px 4px 4px 4px #333;box-shadow:  4px 4px 4px 4px #333; clear:both;">
Consumer
          </div>
          <div style=" background-color:#94C8F1; line-height:65px; width:100%; height:65px;">

             Business</div>
    <div style=" background-color:#333; width:100%; height:65px;"><a href="#" style="color:#fff; text-decoration:none;">Close</a>

          </div></div>

but I want the box to slide up from the bottom similar to this: http://jsfiddle.net/R8zca/4/

Can anyone help with accomplishment? seems to fail on trial.

Thanks

Upvotes: 0

Views: 1262

Answers (1)

user2985029
user2985029

Reputation:

remove the heights from the inline styles in the html and set the boxes to an initial height of 0px in the css, then use the css transition to bring them to full height

html 

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a>
<div id="lightbox">

          <div style=" background-color:#CBE376; width:100%; line-height:65px; border-bottom:solid #999 thin; -webkit-box-shadow:  4px 4px 4px 4px #333;box-shadow:  4px 4px 4px 4px #333; clear:both;">
Consumer
          </div>
          <div style=" background-color:#94C8F1; line-height:65px; width:100%; ">

             Business</div>
    <div style=" background-color:#333; width:100%;"><a href="#" style="color:#fff; text-decoration:none;">Close</a>

          </div></div>

css

body{margin:0;}
#lightbox div
{
    height: 0px;
}
#lightbox {
        display:block;
        position:absolute;
        bottom:5px;
        z-index:1000;
        width:100%;
        background-color:#09F;
        float:left;
        font-family: 'helvetica_bqregular';
        font-size:20px;
        line-height:65px;
        color:#FFF;
        text-align:center;
            }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

#lightbox:target div
{
    height: 65px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

http://jsfiddle.net/axrwkr/XPJC5/2

Upvotes: 1

Related Questions