mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
75 lines
1.3 KiB
HTML
75 lines
1.3 KiB
HTML
<div class="card">
|
|
<span></span>
|
|
<div class="content">Hover Me : )</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by htwarriors108 - Tags: gradient, card, hover, glow, neon, colorful, hover effect, hoverme */
|
|
.card {
|
|
position: relative;
|
|
width: 190px;
|
|
height: 254px;
|
|
color: #fff;
|
|
transition: 0.5s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: linear-gradient(45deg, #ffbc00, #ff0058);
|
|
border-radius: 1.2em;
|
|
}
|
|
|
|
.card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, #ffbc00, #ff0058);
|
|
filter: blur(30px);
|
|
}
|
|
|
|
.card span {
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 6px;
|
|
right: 6px;
|
|
bottom: 6px;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
z-index: 2;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.card span::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.card .content {
|
|
position: relative;
|
|
padding: 10px;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 1.5em;
|
|
}
|
|
</style>
|