mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
64 lines
1.5 KiB
HTML
64 lines
1.5 KiB
HTML
<div class="card">
|
|
<p class="card-p">Hover Me</p>
|
|
<div class="card-countent">
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque hic soluta amet, ipsum quia numquam excepturi veritatis deleniti similique ipsam obcaecati nulla dolor, sapiente earum blanditiis pariatur minima iure repudiandae.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by javadpg - Tags: card, hover, stitched, transition, css, card hover */
|
|
.card {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
position: relative;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 300px;
|
|
height: 350px;
|
|
border-radius: 6px;
|
|
transition: .3s;
|
|
background-color: #000;
|
|
}
|
|
|
|
.card-p {
|
|
position: absolute;
|
|
text-align: center;
|
|
}
|
|
|
|
.card::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -6;
|
|
border-radius: 6px;
|
|
width: 320px;
|
|
height: 370px;
|
|
background-color: #8EC5FC;
|
|
transition: .7s;
|
|
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
|
|
}
|
|
|
|
.card-countent {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: transparent;
|
|
transition: all .7s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.card:hover {
|
|
transition: .7s;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.card:hover > .card-p {
|
|
color: transparent;
|
|
}
|
|
|
|
.card:hover > .card-countent {
|
|
opacity: 1;
|
|
color: #000;
|
|
transform: rotate(-180deg);
|
|
}
|
|
</style>
|