mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
91 lines
2.5 KiB
HTML
91 lines
2.5 KiB
HTML
<div class="card">
|
|
<div class="card-content">
|
|
<div class="card-top">
|
|
<span class="card-title">01.</span>
|
|
<p>Lightning.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<p>Hover Me?</p>
|
|
<svg width="32" viewBox="0 -960 960 960" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M226-160q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-414q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-668q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Z"></path></svg>
|
|
</div>
|
|
</div>
|
|
<div class="card-image">
|
|
<svg width="48" viewBox="0 -960 960 960" height="48" xmlns="http://www.w3.org/2000/svg"><path d="m393-165 279-335H492l36-286-253 366h154l-36 255Zm-73 85 40-280H160l360-520h80l-40 320h240L400-80h-80Zm153-395Z"></path></svg>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Samalander0 - Tags: card, hover, rounded, hover effect */
|
|
.card {
|
|
width: 320px;
|
|
background: #fff480;
|
|
color: black;
|
|
position: relative;
|
|
border-radius: 2.5em;
|
|
padding: 2em;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.card .card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 5em;
|
|
height: 100%;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.card .card-top, .card .card-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card .card-top p, .card .card-top .card-title, .card .card-bottom p, .card .card-bottom .card-title {
|
|
margin: 0;
|
|
}
|
|
|
|
.card .card-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card .card-top p, .card .card-bottom p {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card .card-bottom {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.card .card-image {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card .card-image svg {
|
|
width: 4em;
|
|
height: 4em;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
cursor: pointer;
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.card:hover .card-content {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.card:hover .card-image svg {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.card:active {
|
|
transform: scale(0.9);
|
|
}
|
|
</style>
|