Jump to content

7.1 portfolio mobile overlay text doesnt show on scroll or hover

Recommended Posts

portfolio 7.1 site mobile view on portfolio page hover overlay text does not appear whatsoever - I really need this text  title to display on touch screens mobiles upon scrolling or selecting -how may i fix this?

please take a peek at the portfolio page on any mobile view  www.nadinenorman.com/artwork

sincere thks to anybody who may be of help - nadine

 

Edited by nbn
Link to comment
  • 3 weeks later...
  • 2 months later...
  • 1 month later...
  • 2 months later...

I ran into this frustrating roadblock today. As this post was one of the first search results I found I'm posting my solution here.

/*Portfolio Overlay Grid*/
.portfolio-text:hover {
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 0.7);
}

This has worked for me to get the hover overlay effect on mobile and tablets. The background overly is 70% white, you can edit as you like.
I've ended up setting this from desktop screen size down to make sure it also works on iPad Pro's (I don't have one to check).

I hope this is helpful for someone. 

Really disappointed that Squarespace doesn't have this sorted yet.

Link to comment
  • 4 months later...
On 8/29/2020 at 1:24 AM, AlecEiffel said:

I ran into this frustrating roadblock today. As this post was one of the first search results I found I'm posting my solution here.


/*Portfolio Overlay Grid*/
.portfolio-text:hover {
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 0.7);
}

This has worked for me to get the hover overlay effect on mobile and tablets. The background overly is 70% white, you can edit as you like.
I've ended up setting this from desktop screen size down to make sure it also works on iPad Pro's (I don't have one to check).

I hope this is helpful for someone. 

Really disappointed that Squarespace doesn't have this sorted yet.

Hey can you tell me where to paste this code into? Really trying to get this set up so that the text hover shows on mobile scroll the same as on desktop. Thank you! 

Link to comment
23 hours ago, eyefrequency said:

Hey can you tell me where to paste this code into? Really trying to get this set up so that the text hover shows on mobile scroll the same as on desktop. Thank you! 

Add to DESIGN > CUSTOM CSS

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
  • 1 year later...
On 2/24/2022 at 3:30 AM, SHendler said:

Hey @AlecEiffelthat worked perfectly for mobile THANK YOU!

Any idea how I can make it work for iPad/Tablet? - It currently does not work on there.

Change 640px to 991px

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
  • 4 months later...

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

Hi there,

I'd like my portfolio titles appear over gallery images on mobile as I scroll down.  I have the code below added as custom CSS that kind of does it but unfortunately not in a tidy way. For some reason the portfolio images get a darker overlay which then goes lighter, instead of staying darker. I was wondering if there is way to remedy this issue. Thank you all in advance for your help. 

@media screen and (max-width:640px) {

.portfolio-text:hover {

  opacity:1 !important;

  background-color: rgba(0, 0, 0, 0.4);  }
}

Edited by kalperius
Link to comment
  • 11 months later...
  • 4 months later...

I'm using this code with some success; however, the hover effect isn't behaving quite like it should. 

Is there anyway to achieve this overlay effect on hover in mobile as in this website: https://www.brethrendesignco.com/work ?

Here's the code that is 99% there — the hover effect still needs work though to make it more fluid: 

/*Portfolio Overlay Grid*/
.portfolio-text:hover {
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 0.7);
}

Thank you,

Brad

Link to comment
  • 4 months later...

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.