How to overlay headings and links on images using Dawn theme's multicolumn function?

[Justin34]

Hi everyone!

I am using the Dawn theme. When designing my website, I used the multicolumn function option. I have six "columns" altogether. I have it set up on my desktop for three columns per row. The only thing I include is an image, a heading and a link. What I was wondering is if there is anyway to put the heading and link directly over the image for each image, heading, and link. Maybe put a little opacity over the image too so the heading and the link can be read. Is there anyway to do this?

I hope this question makes sense.

My website is www.pennsylvaniaparks.org

Thanks!

[LitCommerce]

Hi @Justin34,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-card__image-wrapper {
	position: relative;
}
.multicolumn-list__item.center .media--adapt img {
    width: 100%;
}
.multicolumn-card__image-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    z-index: 2;
    opacity: 0.2;
}
.multicolumn-card__info {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.multicolumn-card__info * {
    color: #fff !important;
}

it will display like this:

[Justin34]

That screenshot looks great!! Is there anyway to make the space between the two rows the same width as the space between the columns? Thanks so much!

[LitCommerce · Accepted solution]

Hi @Justin34,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-card-spacing {
    margin: 2.5rem;
}
@media screen and (min-width: 750px) {
	.background-none .multicolumn-card__image-wrapper {
		margin: 1.5rem;
	}
}

it will display like this:

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[Justin34]

That is ABSOLUTELY PERFECT!! Thank you so much for your help. Really made a difference. Have a fantastic day!

[anatchim]

Hi @LitCommerce 

I was trying to apply this same solution to a specific section of my website, through the "Custom CSS" field on the properties panel


...however it has a limit of 500 characters, and I can't do it.

If I put the code on the "section-multicolumn.css" file, this would be applied on every "Multicolumn" section I use sitewide, right?... 
How do I workaround to apply the code only to a specific page? 🤨

Thank you so much,

Ana

[Ksu10005]

Hello @LitCommerce 
I'm doing the same thing now, but I have several multicolumn sections on one page and when I add this code it applies to all these sections, but I need to do it only for one particular section. How can I make it?