Kevin Powell - CommunityKP-C
Kevin Powell - Communityโ€ข15mo agoโ€ข
20 replies
Hidi_

Positioning text with absolute with responsiveness

Heyo, I got a card-title that I want to be placed at a certain spot on the page and it needs to be responsive. I thought of using position absolute, since it needs to be on top of a masked image. Here's a video how it's acting right now and the necessary code:

.project-card {
    position: relative;
}

.project-card-title {
    position: absolute;
    z-index: 2;
    top: 0%;
    right: 7.5%;

    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
}

.project-image {
    -webkit-mask-image: url('/assets/images/project-mask.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;

    mask-image: url('/assets/images/project-mask.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
}
Was this page helpful?