The following is animated using height, which is like drawing a curtain :-
https://jsfiddle.net/AaronNGray/kf0br46u/31/
HTML
<div id="box">
<div id="content">AaronNGray</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
width: auto;
background: transparent;
transition: all 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
height: 0px;
transition: all 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 50px;
top: 0px;
}
What I need is to be able to animate 'top' so the content div slides
downwards.
This is what I have tried but it does not work.:-
https://jsfiddle.net/AaronNGray/kf0br46u/38/
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
top: -50px;
width: auto;
background: transparent;
transition: top 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
top: -50px;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: top .8s ease;
-moz-transition: top .8s ease;
-ms-transition: top .8s ease;
-o-transition: top .8s ease;
}
#box:hover > #content {
top: 50px;
}
Hope you can help and its something simple I am missing, usually is :)
Regards,
Aaron
--
Aaron Gray
Independent Open Source Software Engineer, Computer Language Researcher,
Information Theorist, and amateur computer scientist.
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
