Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 portfolio mobile overlay text doesnt show on scroll or hover


nbn

Question

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

15 answers to this question

Recommended Posts

  • 0

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
  • 0
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
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Create an account or sign in to comment

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

×
×
  • Create New...