phantom phantom - 5 months ago 49
CSS Question

make a div fold out to show content

I am trying to achieve the same effect here so when you hover on the div it folds out and shows the content, but I cannot figure out how to do this.

So far I am able to make the content slide in by using the following code. Code underneath and jsfiddle can be seen here.

html

<div class="artist artist-1"></div>
<div id="artist-text">Hi there</div>


css

.artist-1:hover + #artist-text {
display: block;
}

#artist-text {
display: none;
background-color: #000000;
width: 130px;
padding: 10px;
position: absolute;
left: 50%;
top: 60%;
animation-duration: 1s;
animation-name: slideLeft;
}

.artist {
height: 100px;
width: 100px;
}

.artist-1 {
background-color: red;
position: absolute;
left: 20%;
top: 40%;
}

@keyframes slideLeft {
from {
margin-left: 100%;
width: 100%;
}

to {
margin-left: 0%;
width: 100%;
}
}

Answer

I'm going to try and guide you in the right direction. They're using 3D transforms to create the flip card effect, alongside the transform-origin property. Here's a link to a tutorial showing an effect on which you can base your code:

https://desandro.github.io/3dtransforms/docs/card-flip.html

Also, here's a live example. It's probably not exactly what you need, but it will help you.

.card, .card-flip {
  position:absolute;
  display:block;
  background:lightgreen;
  width:200px;
  height:300px;
}

.card {
  z-index:1;
}

.container {
  perspective: 800px;
}

.card-flip {
  background:lightblue;
  margin-left:200px;
  transition: transform 1s;
  transform-origin:left;
  transform:rotateY(120deg);
  z-index:0;
}

.container:hover .card-flip {
  transform:rotateY(0deg);
}
<div class="container">
  <div class="card"></div>
  <div class="card-flip"></div>
</div>