Transparent Text

Hi Guys,

Can anyone tell me how to achieve transparent text on color background? Like the way contact us is written.

19 minutes ago, saumi said:

Hi Guys,

Can anyone tell me how to achieve transparent text on color background? Like the way contact us is written.

 

Kindly share your site with protected password to the text you want to set

Where do you want to add this transparent text? A screenshot of it could help a lot

Something like this?

Yes, this would go as a banner on after header. Can you please share the code or a way to do so?

Thanks

7 hours ago, saumi said:

Yes, this would go as a banner on after header. Can you please share the code or a way to do so?

Thanks

Try

section[data-section-id="6141fd4487025957190fb2ce"] {
  /*Transparent text for Let go*/
	.content {
		&:after {
			content: 'CONTACT US';
			font-size: 10rem;
			position: absolute;
			left: -50px;
			bottom: -160px;
			display: block;
			width: 100%;
			color: rgb(255 255 255 / 0.7);
			letter-spacing: 20px;
		}
	}
	overflow: hidden;
}
section[data-section-id="6141fd4487025957190fb2ca"] {
    /*Transparent text for banner*/
	.content {
		&:after {
			content: 'CONTACT US';
			font-size: 10rem;
			position: absolute;
			left: -50px;
			bottom: -110px;
			display: block;
			width: 100%;
			color: rgb(255 255 255 / 0.2);
			letter-spacing: 20px;
		}
	}
	overflow: hidden;
}

Hope it can help you

@bangank36

The code is not working, I think I'm missing something.

https://www.theupproject.io/contact

section[data-section-id="61a088a564caf5369953ac7c"] {
  /*Transparent text for Let go*/
    .content {
        &:after {
            content: 'CONTACT US';
            font-size: 10rem;
            position: absolute;
            left: -50px;
            bottom: -160px;
            display: block;
            width: 100%;
            color: rgb(255 255 255 / 0.7);
            letter-spacing: 20px;
        }
    }
    overflow: hidden;
}
section[data-section-id="61a088a564caf5369953ac7c"] {
    /*Transparent text for banner*/
    .content {
        &:after {
            content: 'CONTACT US';
            font-size: 10rem;
            position: absolute;
            left: -50px;
            bottom: -110px;
            display: block;
            width: 100%;
            color: rgb(255 255 255 / 0.2);
            letter-spacing: 20px;
        }

Also the code is creating issues for other code, padding and margins were messed up.

56 minutes ago, saumi said:

Also the code is creating issues for other code, padding and margins were messed up.

Current codes is applied for Home Page. Kindly remove it.

With contact page, you use the following one

section[data-section-id="61a088a564caf5369953ac7c"] {
  overflow: hidden;
}
section[data-section-id="61a088a564caf5369953ac7c"] .content:after {
  content: "CONTACT US";
  font-size: 10rem;
  position: absolute;
  left: -2%;
  bottom: -28%;
  right: 0;
  display: block;
  width: 100%;
  color: rgba(255, 255, 255, 0.3);
}

Thank you so much it worked. But how to fix for mobile-view?

Any suggestions?

5 hours ago, saumi said:

Thank you so much it worked. But how to fix for mobile-view?

Any suggestions?

You can set the style of font-size and position of bottom in some breakpoints. Here is my suggest

@media only screen and (max-width: 1200px) {
	section[data-section-id="61a088a564caf5369953ac7c"] .content:after {
		font-size: 12rem;
		bottom: -30%;
	}
}

@media only screen and (max-width: 950px) {
	section[data-section-id="61a088a564caf5369953ac7c"] .content:after {
		font-size: 10rem;
	}
}

@media only screen and (max-width: 800px) {
  /*style for mobile*/
	section[data-section-id="61a088a564caf5369953ac7c"] .content:after {
		font-size: 8rem;
		bottom: -25%;
	}
}

@media only screen and (max-width: 640px) {
	section[data-section-id="61a088a564caf5369953ac7c"] .content:after {
		font-size: 4rem;
	}
}

You can define/ modify to meet your requirement

Hope it can help you

@bangank36 Thanks it worked🙏