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

Store Design
1

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!

3 Likes
2

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:

Screenshot.png
Screenshot.png1508×637 338 KB

1 Like
3

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!

4

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:

Screenshot.png
Screenshot.png1433×635 1.15 MB

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

2 Likes
5

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

1 Like
6

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?

7

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

custom-css.jpg
custom-css.jpg196×229 6 KB

…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