mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
77 lines
1.6 KiB
HTML
77 lines
1.6 KiB
HTML
<div class="card">
|
|
<div class="box">
|
|
<div class="content">
|
|
<span class="card-title">CSS Clip-Path </span>
|
|
<div class="text">
|
|
<strong>ELEKTRO RAKS</strong>
|
|
<p>Custom card</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by ElektroRaks - Tags: card, polygon, blur filter, text animation, rotate, clip-path */
|
|
.card {
|
|
width: 11.875em;
|
|
height: 15.875em;
|
|
background: linear-gradient(135deg, #1afbf0, #da00ff);
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.074);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
clip-path: polygon(54% 27%, 100% 50%, 100% 100%, 51% 74%, 0 50%, 0% 0%);
|
|
transition: 0.5s;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.card-title {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
color: white;
|
|
display: block;
|
|
padding-top: 6.3em;
|
|
font-size: 1.2em;
|
|
transform: rotate(34deg);
|
|
transition: 0.5s;
|
|
margin-left: 25%;
|
|
}
|
|
|
|
.text {
|
|
color: white;
|
|
opacity: 0;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.card:hover .content {
|
|
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
|
|
}
|
|
|
|
.card:hover .card-title {
|
|
padding-top: 1em;
|
|
margin-left: 0%;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.card:hover .text {
|
|
opacity: 1;
|
|
}
|
|
</style>
|