7.1 portfolio mobile overlay text doesnt show on scroll or hover

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

You want it always show or show on hover?

hi tuanphan - i want the overlay text to appear on mobile touch  screen as we scroll down or touch - in the same way it does this with hover on a computer screen 

any updates on this? I have the same question

looking for the answer for this as well!

Same question @tuanphan

21 hours ago, JanelleNine said:

Same question @tuanphan

Very difficult. 

Same question 

Does this work?

/*overlay text on portfolio grid*/
@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1 !important;
}
}

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.

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! 

Wondering if anyone on this forum has found a solution? Appreciate it. 

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

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.

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

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);  }
}

Does anyone know how to get this to appear on scroll as opposed to hover? 

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