@opensig/opendesign
Version:
48 lines • 1.2 kB
CSS
@media (hover: hover) {
.c-card-ascend-hover {
position: relative;
}
.c-card-ascend-hover:before {
background-image: linear-gradient(269deg, #e0f4f5, #e5f3f9 24%, #bac2ea 58%, #d0b4e5 97%);
content: "";
height: 100%;
left: 0;
-webkit-mask-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0.34) 22%, hsla(0, 0%, 100%, 0) 61%);
mask-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0.34) 22%, hsla(0, 0%, 100%, 0) 61%);
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.3s;
width: 100%;
z-index: 0;
}
.c-card-ascend-hover > * {
position: relative;
z-index: 1;
}
.c-card-ascend-hover:hover:before {
opacity: 1;
}
}
.c-card-ascend-xl-radius {
--card-radius: 24px;
--card-cover-radius: 24px;
}
@media (min-width: 1201px) and (max-width: 1680px) {
.c-card-ascend-xl-radius {
--card-radius: 20px;
--card-cover-radius: 12px;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.c-card-ascend-xl-radius {
--card-radius: 16px;
--card-cover-radius: 8px;
}
}
@media (max-width: 840px) {
.c-card-ascend-xl-radius {
--card-radius: 8px;
--card-cover-radius: 4px;
}
}