Adding image overlay opacity to multicolumn

Store Design
1

Hi community,

just wondering if it was possible to add an image overlay function to multicolumn images, like you can do with banner images?
Is there a code I can add into the liquid file?

Am using the dawn theme.

TIA

2

Hi @missjewellee

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/section-multicolumn.css
  3. Add code below to bottom of file
.multicolumn-card .multicolumn-card__info {
	cursor: pointer;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 100%;
	width: calc(100% - 3rem);
	background: rgba(0,0,0,0.4);
	z-index: 1;
	display: block;
	pointer-events: none;
  }
  .multicolumn .multicolumn-card {
 	position: relative;
 }
 @media(max-width: 749px){
 	.multicolumn-card .multicolumn-card__info { 
 		width: 100%;
 	}
 }
1 Like
3

Hi EBOOST,

Yes this is what I am after - although was hoping i could change the opacity like you can do in image banners. After just a 10% opacity.

4

Actually - it’s messed up my other multicolumn and changed that to. Is there a way to add the slider function as an option within the section editor?