mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
92 lines
2 KiB
HTML
92 lines
2 KiB
HTML
<div class="cards">
|
|
<div class="card one">
|
|
<div class="cardDetails">
|
|
<div class="cardDetailsHaeder">Card Header</div>
|
|
<div class="cardDetailsButton">Click me</div>
|
|
</div>
|
|
</div>
|
|
<div class="card two">
|
|
<div class="cardDetails">
|
|
<div class="cardDetailsHaeder">Card Header</div>
|
|
<div class="cardDetailsButton">Click me</div>
|
|
</div>
|
|
</div>
|
|
<div class="card three">
|
|
<div class="cardDetails">
|
|
<div class="cardDetailsHaeder">Card Header</div>
|
|
<div class="cardDetailsButton">Click me</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by shlomo20 - Tags: gradient, card, hover, gradients */
|
|
.cards {
|
|
position: relative;
|
|
}
|
|
|
|
.card {
|
|
z-index: 1;
|
|
position: absolute;
|
|
width: 254px;
|
|
height: 190px;
|
|
border-radius: 10px;
|
|
transition: all .5s ease-out;
|
|
overflow: hidden;
|
|
transform: translateX(0px) translateY(0px) perspective(905px) rotateX(0deg) rotateY(0deg) rotateZ(-8deg);
|
|
}
|
|
|
|
.card.one {
|
|
top: -120px;
|
|
left: -150px;
|
|
background: linear-gradient(180deg, #FF0055 0%, #000066 100%);
|
|
}
|
|
|
|
.card.two {
|
|
top: -95px;
|
|
left: -125px;
|
|
background: linear-gradient(180deg, #fa00ff 0%, #01f998 99%);
|
|
}
|
|
|
|
.card.three {
|
|
top: -70px;
|
|
left: -100px;
|
|
background: linear-gradient(180deg, #c0f901 0%, #fa00ff 100%);
|
|
}
|
|
|
|
.card:hover {
|
|
z-index: 4;
|
|
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
|
|
transition: all .5s ease-out;
|
|
}
|
|
|
|
.cardDetails {
|
|
width: 55%;
|
|
height: 100%;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
background: rgba(0,0,0,0.8);
|
|
transition: .5s;
|
|
transform-origin: left;
|
|
transform: perspective(2000px) rotateY(-90deg);
|
|
}
|
|
|
|
.card:hover .cardDetails {
|
|
transform: perspective(2000px) rotateY(0deg);
|
|
}
|
|
|
|
.cardDetailsHaeder {
|
|
font-weight: 600;
|
|
color: #edb899;
|
|
}
|
|
|
|
.cardDetailsButton {
|
|
padding: 3px 6px;
|
|
border-radius: 25px;
|
|
background-color: #edb899;
|
|
color: #000;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|