How can I create a text overlay in Refresh Theme?

Store Design
, , , , ,
1

Could someone assist me with this matter?
I’m attempting to create a text overlay on the blogpost/new as shown in the screenshot below. Presently, the text appears beneath the featured image of the blog, but my goal is to have the text overlay onto the image instead.

My store address is: https://sk8ology23.myshopify.com/

The password is: uskian

I am using Refresh theme

Thank you in advance

blogpost 1.png
blogpost 1.png1920×1157 381 KB

2

Hey @technase

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1691827211195.png
Moeed_0-1691827211195.png1263×610 361 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hello @technase ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

h3.card__heading.h2 {
    position: absolute;
    top: 36%;
    text-align: center; 
    width: 91%;
    color: #000; 
    opacity: 0.8;
}

Thanks

1 Like
4

Hey,
Thank you for that. Can we also move the date to the top and overlay it on the image ?
Also can we contain the text, its actually touch the borders of the image. I would like the heading to be in two lines instead.
Thanks again for your help.

5

Thank you.
Can we also move the date up so it is overlaid on the image ?

6

Hi @technase

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

h3.card__heading.h2 {
    margin-top: -105px;
    z-index: 9999 !important;
    position: absolute;
    color: white;
    background: none;
    width: 85%;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly