Hi,
I want to update the look of the collection cards that show from the left below to the right below.
Check the page:
https://teamy.dk/collections
pw: teamy
Thank you.
.card__media img.motion-reduce {
border-radius: 22px;
}
.card__information {
position: absolute;
bottom: 14px;
left: 22px;
}
h3.card__heading {
color: #fff;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Please share the store URL…
It’s in the original post.
https://teamy.dk/collections
pw: teamy
The code for https://teamy.dk/collections/dance-mania is “dance”
hi @QuestlineApS the code provided by @oscprofessional is working on my site. i have added some code to that one plz paste this at the bottom of base.css
.collection-list .card__media img.motion-reduce {
border-radius: 22px;
}
.collection-list .card__information {
position: absolute;
bottom: 14px;
left: 22px;
}
.collection-list h3.card__heading {
color: #fff;
}
1 Like
.collection-list .card__media img.motion-reduce {
border-radius: 22px;
}
.collection-list .card__information {
position: absolute;
bottom: 14px;
left: 22px;
}
.collection-list h3.card__heading {
color: #fff;
}
1 Like
That seems to be working. However, how do I add a 50% black opacity to the image, to make sure the text is always visible?
Which image, text is in white it is visible.
@oscprofessional
You see if the image had some sort of dark layer above it then the text would show more clearer.
Here it rather fades with the image. If I chose to use a almost completely white image in the future, then the text (which also functions as the button) will be completely invisible.
Hello @QuestlineApS
Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css
.card__media img { filter: brightness(70%); }
1 Like
Thank you for your help!