Skip to content

Instantly share code, notes, and snippets.

  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Card fold down effect with dynamic height

Card fold down effect with dynamic height

A mix of max-height 0 and overflow hidden, and transform. With the benefit of dynamic height of content that gets folded out.

A Pen by Kriszta on CodePen.

License.

<div class="wrap">
<h1>Hover card</h1>
<div class="task">
<div class="abstract">
<h3>Abstract</h3>
<p>This is what you see by default.</p>
</div>
<div class="details">
<div class="details__inner">
<h3>Details</h3>
<p>This additional content gets revealed on hover.</p>
</div>
</div>
</div>
</div>
body {
width: 30%;
min-width: 300px;
height: 80vh;
margin: 20vh auto 0;
background: linear-gradient(to left, #FF512F , #DD2476); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #282828;
}
h1 {
color: white;
}
//Demo styles
.task {
position: relative;
overflow: hidden;
cursor: pointer;
perspective: 800px;
transform-style: preserve-3d;
}
.abstract,
.details {
$bg: rgba(white, 1);
width: 100%;
padding: 15px 30px;
position: relative;
background: $bg;
.task:hover & {
background: darken($bg, 2%);
}
}
.abstract {
//z-index: 10;
transition: .3s ease all;
}
.details {
max-height: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
transform: rotateX(-180deg);
transform-origin: top center;
backface-visibility: hidden;
transition: .3s transform ease;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: grey;
}
.task:hover & {
max-height: none;
overflow: visible;
visibility: visible;
transform: rotateX(0deg);
}
}
.details__inner {
padding: 15px 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment