Solved

How can I overlay text on images in the Dawn theme?

acmilan8
Visitor
3 1 0

Hi guys, I am new at Shopify and just building my first website, but I want to make it as "designy" as possible...and I have one question. I am working on Dawn theme, which seems very nice for furniture online store. 

 

Could anyone help me hoe could I get my font/wordings from under the image directly on to the image in the middle of the image and with some oppacity. This is my current situation (see the photo).

 

Text overlay.png

Accepted Solutions (2)

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Hello,

In the 'Custom CSS' field of your collage section, paste the below code. Watch the attached video how to do it and change the text color and adjust overlay opacity.

.card {
  position: relative;
}
.card__content {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.20);
}
.card__content .full-unstyled-link {
  color: #ffffff;
}

 
I hope this will help.

Best regards,

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

acmilan8
Visitor
3 1 0

This is an accepted solution.

Perfect, it works great! Thank you! 🙂 Do you know maybe, how can I change font size, but just in this section? So just in this Collage. Thanks again for your help!

View solution in original post

Replies 4 (4)

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Hello,

In the 'Custom CSS' field of your collage section, paste the below code. Watch the attached video how to do it and change the text color and adjust overlay opacity.

.card {
  position: relative;
}
.card__content {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.20);
}
.card__content .full-unstyled-link {
  color: #ffffff;
}

 
I hope this will help.

Best regards,

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
acmilan8
Visitor
3 1 0

This is an accepted solution.

Perfect, it works great! Thank you! 🙂 Do you know maybe, how can I change font size, but just in this section? So just in this Collage. Thanks again for your help!

SumanSaurabh
Shopify Partner
69 26 27

Below is the updated code, you can change font size in the second last line, it's currently 24px

.card {
  position: relative;
}
.card__content {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.20);
}
.card__content .full-unstyled-link {
  color: #ffffff;
  font-size: 24px !important;
}

 

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Elouise101
Visitor
1 0 0

is there away to get rid of the arrow next too the text?