Shopify themes, liquid, logos, and UX
I would like to overlay text on my collection cards onto the image instead of under the image.
This is how it currently looks:
I it to looks like this:
Instead of having the text centred, I want it aligned to the bottom left corner.
I also need the slight black opacity over the image to make my text readable when I make it white.
Please help.
My website link is: https://8ae3b9-27.myshopify.com/
Thanks.
Try this one.
.collection-list-wrapper .card__content {
position: absolute;
bottom: 5px;
}
.collection-list-wrapper .card__heading {
color: white;
}
.collection-list-wrapper span.icon-wrap {
display: none;
}
Note: You can change the color of the font but be sure not delete the signs. Only the letters to remove and channge, also this will apply all the collection list you have in the store.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Thanks! Can you please also help me make the text slightly lower on the image and add a black opacity behind the text that fades into the image to help make it easier to read?
Please, replace on this code. Thanks!
.collection-list-wrapper .card__content {
position: absolute;
bottom: 0;
}
.collection-list-wrapper .card__heading {
color: white;
}
.collection-list-wrapper span.icon-wrap {
display: none;
}
.collection-list-wrapper .card__information {
padding: 0 .5rem;
position:relative;
}
.collection-list-wrapper .card__information {
background-color: rgba(0, 0, 0, 0.4);
}
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thanks, but I meant that I'd like that opacity over the whole collection card.
Would it be possible to do something like this?
Do you know how I can change the color of the text button for individual cards in collage?
@ProconMarketing search first for common topics in specific themes
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025