mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
73 lines
1.9 KiB
HTML
73 lines
1.9 KiB
HTML
<div class="card">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>
|
|
<div class="card__content">
|
|
<p class="card__title">Card Title</p>
|
|
<p class="card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by gharsh11032000 - Tags: card, hover effect, cardhover */
|
|
.card {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 200px;
|
|
background-color: #f2f2f2;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
perspective: 1000px;
|
|
box-shadow: 0 0 0 5px #ffffff80;
|
|
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.card svg {
|
|
width: 48px;
|
|
fill: #333;
|
|
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.card__content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
background-color: #f2f2f2;
|
|
transform: rotateX(-90deg);
|
|
transform-origin: bottom;
|
|
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.card:hover .card__content {
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
.card__title {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
color: #333;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.card:hover svg {
|
|
scale: 0;
|
|
}
|
|
|
|
.card__description {
|
|
margin: 10px 0 0;
|
|
font-size: 14px;
|
|
color: #777;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
</style>
|