multicolumn text on image

Store Design
, ,
1

I am trying to put text on top of images on a multicolumn. I’d like the text at the bottom left with the button, but the option to put the text in the middle of the photo also. Also I only want this to apply to one section not all of my multicolumns so I am looking to add this to the custom css of that section.

I am using Dawn theme.

2

Hello @Bells1
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Hi @Bells1 ,

May I suggest code below to add to custom CSS in the section that you would like to custom.

.multicolumn-card.content-container {
  position: relative;
}
.multicolumn-card__info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  text-align: left;
}

EBOOST_0-1743057370046.png
EBOOST_0-1743057370046.png1876×745 230 KB

4

Works great, but there is a dark box around my photos how do I remove that? fixed it - there was background 0.1 and I changed it to 0

5

is there a way to make the button have an outline? and the option to move the lettering to the center of the photo?

6

Hi,

You can add more code below:

  • center letter
.multicolumn-card__info {
		justify-content: center;
  		text-align: center;
	}
  • outline button
.multicolumn-card__info .link {
		border: 1px solid;
	}
7

is there a way to take off the arrows and make the whole photo clickable? with a shadow effect? Thank you for all your help!

8

Hi,

the size limit of 500 characters in the custom CSS of each section. If you want to it. You need get ID of this section add before each line CSS below after add it to Assets/base.css

.multicolumn-card__info:hover {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.multicolumn-card__info .link .svg-wrapper {
  display: none;
}
.multicolumn-card__info .link:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}