scroll overlay

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

@tuanphan

With the jasper template on desktop my title overlay is on hover, but how can you make it scroll for mobile only?

On 8/28/2021 at 10:34 AM, mashomasho said:

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

@tuanphan

With the jasper template on desktop my title overlay is on hover, but how can you make it scroll for mobile only?

Title appear on scroll on mobile?

Not possible. If you want to make it always visible or title under, we can check & give the code

@tuanphan

Is it possible to make it always visible but on mobile only?

Thank you!

On 9/1/2021 at 10:53 AM, mashomasho said:

@tuanphan

Is it possible to make it always visible but on mobile only?

Thank you!

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:640px) {
.index-item-text-wrapper {
    position: relative !important;
    opacity: 1 !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    height: auto !important;
    margin-top: 20px;
}

div.index-section {
    margin-bottom: 70px;
}

h2.index-item-title {
    color: black !important;
}

span.index-item-title-text {
    color: black !important;
}

a.index-item-title-link {
    color: black !important;
}
}

Thank you @tuanphan

I was meaning if it was possible to overlay the text over the image as it is on desktop, but instead of showing up when scrolling, being stagnant for mobile only. 

ie on mobile, having the images on the home page  at 55 hover opacity and white text is on top of the image. 

Please let me know if thats possible

Overlay on desktop, show title under image on mobile? You can set overlay in default setting, then use above code to make title under image on mobile. Then we will continue checking to make image hover + change text to top of image

Overlay on both desktop and mobile. but mobile stagnant text overlay. Not title under image on mobile. Thank you