How can I create a text overlay on images in Refresh Theme?

Store Design
, , , ,
1

Could someone assist me with this matter?
I’m attempting to create a text overlay on the images as shown in the screenshot below. Presently, the text appears beneath the image, 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

screencapture-sk8ology23-myshopify-2023-08-12-00_54_06.png
screencapture-sk8ology23-myshopify-2023-08-12-00_54_06.png1920×4071 920 KB

1 Like
2

Hi @technase

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.media.media--transparent.media--adapt img {
    position: relative;
    display: inline-block;
    width: 100%;
}
.multicolumn-card__info {
    position: absolute;
    top: 70%;
}
.media.media--transparent.media--adapt {
    padding-bottom: 0px !important;
}
@media only screen and (max-width: 500px){
.multicolumn-card__info {
    position: absolute;
    top: 60%;
}
}

Result:

Ribe_Dagandara_0-1691786802157.png
Ribe_Dagandara_0-1691786802157.png1316×408 158 KB

I hope it help.

" :glowing_star: Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! :raising_hands: "

1 Like
3

Hey,
That’s perfect - thank you so much for that.
can you also do the same for the section right above the footer. that’s a blog section.

4

I think you already did.