Unable to add text on image

[mobitouch]

Hello, currently I am using Cornerstone to build website, and I am unable to add text “Spa” over the image like this, I couldn’t use element “Image” to custom html text for the CSS overlay. How can I add text over image?
Thank you

[nabeel]

Hi @mobitouch,

Thank you for reaching out to us. You can add a background image to your section and then use Text element in the section to have text on the image (see screenshots)

Now drag and drop Text element in your section:

Style your text using Text element’s settings in Cornerstone. You should have something like this:

Hope this helps!

[mobitouch]

Thank you, but if i use this function, I annot have some color after interacting CSS on image like this
.x-image:before {
content: “”;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(11, 7, 5, 0.70);
opacity: 0;
transition: opacity 1s ease;
}

.x-image:hover:before {
opacity: 1;
}
.

[thai]

Hi @mobitouch,

It’s possible with the section as well.

Please add the my-section class to your section.

After that add this custom CSS:

.my-section {
	position: relative;
}

.my-section:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; 
	left: 0;
	background-color: rgba(11, 7, 5, 0.70);
	opacity: 0;
	transition: opacity 1s ease;
}

.my-section:hover:before {
	opacity: 1;
}

Hope it helps

[mobitouch]

Thank you, that works perfectly. But if doing this, I cannot link the custom text to a specific link. How can I link the whole column/section to a specific link?
Many thanks

[thai]

Hi @mobitouch,

Please follow with this ticket:

How to add different links to each column

Hope it helps

[mobitouch]

Thanks it works perfectly

[thai]

You’re welcome.