Text Over Image

Site URL: https://www.statementmakerz.com

Hi, I added large images to my site's homepage and would like to add text over those images so customers know they are clickable. I have the pages linked to each picture but would love a code to add images over it. 

Thanking you in advance. 

@tuanphan... Your help would be greatly appreciated on this. 

On 10/29/2020 at 6:22 AM, Lauri said:

@tuanphan... Your help would be greatly appreciated on this. 

You mean gallery under Freeship50 text?

If yes, you can edit gallery > edit images > add a text in Description box > It will appear under image > we will give the code to move it over image.

On 10/31/2020 at 3:18 AM, tuanphan said:

You mean gallery under Freeship50 text?

If yes, you can edit gallery > edit images > add a text in Description box > It will appear under image > we will give the code to move it over image.

Hi, I’ve edited the section and added text under the description box. Would appreciate the code to move it over image with the same font as on page. 

19 minutes ago, Lauri said:

Hi, I’ve edited the section and added text under the description box. Would appreciate the code to move it over image with the same font as on page. 

Add to Home > Design > Custom CSS

figure.gallery-masory-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-wrapper p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

@Lauri I see your site has some other problems.

1. (Mobile) Facebook chat overlap Cookie notice, so you can't close cookie.

You can add this to Home > Design > Custom CSS to move Cookie position

@media screen and (max-width:767px) {
.sqs-cookie-banner-v2 {
    bottom: 50px !important;
}
}

2. You haven't changed SEO Tile for this page

https://www.statementmakerz.com/earrings

so you will see in Browser Tab Title "Store 2"

3. (Mobile) I think some product list page is too long, you can add a back to top button for users.

If you need this, I will give the code.

4. (Mobile) Product detail page. Breadcrumb is closer header, I think you should increase space between them.

5. (Mobile) Products show number (1/3..) over image, I think you can add Arrows slide, users can easily navigate to view more photos. 

Add to Home > Design > Custom CSS (for both problems 4 & 5)

@media screen and (max-width:767px) {
/* space between breadcrumb - header */
.ProductItem-nav-breadcrumb {
    margin-top: 30px;
}
/* Product slideshow arrows */
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}