2020-11-01
Css only hover flip card
The code is a bit long so you need to read more to see it.
HTML
<div class="card">
<div class="front">
<img src="https://csspoo.com/images/v.jpg">
</div>
<div class="back">
<div class="text">
Soufflé cake jujubes croissant. Lollipop pastry liquorice caramels. Candy canes tootsie roll tootsie roll marzipan icing.
Gummi bears cotton candy macaroon dragée cake chocolate cake pie biscuit pudding.
</div>
</div>
</div>
CSS
.card {
position: relative;
height: 150px;
width: 300px;
}
.card img {
width: 300px;
height: 150px;
object-fit: cover;
object-position: bottom;
}
.card .text {
background: #333;
color: #ccc;
height: 150px;
padding: 1rem;
box-sizing: border-box;
}
.card .front,
.card .back {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 200ms ease-in;
}
.card .front {
transform: scaleX(1);
background: green;
transition-delay: 100ms;
}
.card .back {
transform: scaleX(0);
background: blue;
}
.card:hover .front {
transform: scaleX(0);
}
.card:hover .back {
transform: scaleX(1);
transition-delay: 200ms;
}
Sources
You saw it first on CSSPoo.
Comments