Collection title on top of image Dawn theme, adjust opacity and increase padding.

[JulieBR]

Hello! 

I'm looking for some css (below 500 characters) to make the collection title of a featured collection appearing on top of the image, in white, and without the arrow.

I'm customizing an updated version of Dawn theme. The store is https://julierichmondart.com/ and you can see what happened when I tried some code I found here in the community that kind of worked (nordic prints and nordic originals), vs how I want it to look (art prints and Frame TV). 

Also, can someone help with how I can make the opacity on the images just slightly darker so that the white text pops a bit more.

And: how to I make the padding between the cards a little bigger? When I change the padding in the theme settings, there is a white-ish frame appearing, but the space between the images does not change. 

Thank you, whoever takes the time and effort to answer my questions 🙂

[MaverickStudio · Accepted solution]

Hi @JulieBR ,

Lovely Artwork to begin with!

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css

Step 3: Insert this code at the end of the file:

You can play around with the brightness values to get to your desired amount. It's from a scale of 0 -1.

Same goes for the font size and letter spacing.

.collection-list .card__media img {
	filter: brightness(0.65);
}

.collection-list .card__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
}
.collection-list .card__content .card__heading .full-unstyled-link {
	color: white !important;
	font-size: 24px !important;
	letter-spacing: 4.25px;
}
.collection-list .card__content .card__heading .icon-wrap {
	display: none;
}
.collection-list .collection-list__item {
	padding: 12px;
}

Here is the result in Dawn

Let me know if this fits the bill 🙂

[JulieBR]

Hi!

Thank you so, so much for this, it made an ocean of difference🙌
So glad there are folks like you out there to help, really appreciate it!

Julie/her designerfriend Guro

[MaverickStudio]

Hi @JulieBR & Guro,

Thank you so much for your kind words! I'm thrilled to hear that my solution made such a difference. It's always rewarding to know that my help is appreciated.

If you need any further assistance or have more questions in the future, feel free to reach out!

Best regards,