.card-hover-text__content {
position: absolute;
top: 70%;
left: 40px;
right: 40px;
z-index: 5;
transition: all 0.5s ease-in-out;
margin-bottom: 30px;
}
.card-hover-text__content h3 {
color: white !important;
}
@media (min-width: 980px) and (max-width: 1440px) { .card-hover-text__content .card-hover-text__heading h3 {
font-size: 20px !important;
}
} @media (max-width: 400px) {
.card-hover-text__content .card-hover-text__heading h3 {
font-size: 20px !important;
}
}
.card-hover-text__content p {
color: white;
}
.card-hover-text {
max-height: 600px;
width: 100%;
height: 100%; position: relative;
}
.card-hover-text__readmore {
color: var(--wp--preset--color--secondary) !important;
font-weight: 600;
}
.card-hover-text__text,
.card-hover-text__readmore {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease-in-out;
}
.card-hover-text:hover {
transition: all 0.5s ease-in-out;
}
.card-hover-text:hover .card-hover-text__content {
transform: translateY(-60%);
}
.card-hover-text:hover .card-hover-text__text,
.card-hover-text:hover .card-hover-text__readmore {
opacity: 1;
visibility: visible;
}
.card-hover-text img {
width: 100%;
height: 100%;
aspect-ratio: 1/1.2;
object-fit: cover;
}
.card-hover-text__image {
position: relative;
}
.card-hover-text__link {
height: 100%;
display: flex;
}
.card-hover-text__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0) 100%
);
}