Jump to content

scroll overlay

Recommended Posts

  • Replies 6
  • Views 902
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.