CODEWITHSUNDEEP
javascripthtmlcss
ray55nl
ray55nl

Reputation: 103

Double hover animation - is that possible?

I am trying to make a CSS animation where a card is opened, not from one side, but two sides. So there is a center part and two side "flaps". Both will start folded over the center part.

I know you can do a CSS hover which if I go over it one side will open. At that moment you have e.g. the left side open and the right side is still on top of the middle part. Is it in any way possible to do another hover animation so the right side flips also open and the whole card is visible?

The other way I can see it work is that I click on the back of the left flap, it opens and then I click on the right flap to open it. But I guess that has to be done in Javascript?

Upvotes: 1

Views: 406

Answers (3)

ray55nl
ray55nl

Reputation: 103

@Vektor

That was exactly what i was looking for, thank you!

My end result is:

 * {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    background: url(achtergrond\ omtrek.png);
    width: 1850px;
    height: 929px;
    margin-left: auto;
    margin-right: auto;
}

.content {
    position: absolute;
    left: 35%;
    background: url(center.png);
    width: 563px;
    height: 825px;
    margin: 50px auto 0 auto;
    perspective: 2000px;
    cursor: pointer;
}

.left,
.right {
    position: absolute;
    width: 531px;
    height: 721px;
    top: 5%;
    vertical-align: middle;
    background-color: aqua;
}

.left {
    transform-origin: left;
    transition: 1.5s;
}

.right {
    transform-origin: right;
    margin-left: 30px;
    transition: .5s;
}

.content:hover .left {
    transform: rotateY(-180deg);
    background: url(left.png);
    transition: .5s;
}

.content:hover .right {
    transform: rotateY(180deg);
    background: url(right.png);
    transition: 1.5s;
}

Upvotes: 0

Vektor
Vektor

Reputation: 767

I believe you're looking for something like this, you can tweak the code from here to get your desired results.

* { margin: 0; padding: 0; }

.content {
    background-color: aquamarine;
    width: 150px;
    height: 220px;
    margin: 50px auto 0 auto;
    perspective: 2000px;
    cursor: pointer;
}

.left, .right {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: aqua;
}

.left {
    transform-origin: left;
    transition: 1.5s;
}

.right {
    transform-origin: right;
    transition: .5s;
}

.content:hover .left {
    transform: rotateY(-125deg);
    transition: .5s;
}

.content:hover .right {
    transform: rotateY(125deg);
    transition: 1.5s;
}
<div class="content">
    <div class="right"></div>
    <div class="left"></div>
</div>

Upvotes: 3

ray55nl
ray55nl

Reputation: 103

example

The way i pictured it is, you start als 1. Then you click on it and the sides flip open each to one side and it becomes like 2. the way i like to see it is like you open a book but not just one side but both

Upvotes: 0

Related Questions