How to customize a column as per the attached sample image

[aguliya]

Need help in creating a column like in the sample image inserted where there is a background image, then there is a semi-transparent box partially covering the image and then there are buttons in the box which are clickable and the colour gets inverted on clicking.

[basanta]

Hi Ajay,

Thanks for writing in!
Making a similar column need few custom CSS.
I will guide you how to do that.
Please follow this steps.

1. Fist set a background image in the column lower layer.

2. Add a transparent black color to the upper layer.

3. Add this code to The element CSS of the column.

$el .x-bg-layer-upper-color {
  max-width: 90%;
    max-height: 90%;
  left: 5%;   
    bottom: 5%;
  top: 5%
}

Now your column effect will be like the screenshot you have.
You can now add your content to the column, I believe you can manage the button style and all via cornerstone editor.

Hope this helps!

[aguliya]

Hi @basanta

Thank you for your response. The element css is not working. I am using Pro not X, so the css option is on the LHS menu. I copied the css code there, and saved it. But it is not working. Please help me with how to do it in Pro.

[aguliya]

Hi @basanta

Was able to make it work. Just removed “$el” from the code. Thanks.

[thai]

Hi There,

The provided CSS is applied for one column only so we have to use the $el.

If you remove $el from the code, it will affect for all the column has a background image on your website.

So you should add the provided CSS under Customize > Element CSS:

Regards!