Enable Touch on Mobile Devices - Momentum Template

Can anyone offer a solution for custom css to add to my gallery page to allow the hover action (touch action on mobile) to create the same effect as it does on desktops.

The image should fade-out and text fade in.

Thanks in advance.

12 minutes ago, Jnsn06 said:

Can anyone offer a solution for custom css to add to my gallery page to allow the hover action (touch action on mobile) to create the same effect as it does on desktops.

The image should fade-out and text fade in.

Thanks in advance.

Basically, the hover effect on desktop can be proceeded when you tap and hold for a while on mobile. If your require that your tapping interacts immediately some effect on mobile, we will need to implement some javascript code. And this advanced configuration is only available on business plan or above ones.

Which plan are you using?

I am on a professional plan which I believe was phased out and it would be the equivalent to the business plan.

Here is the site/page I'm looking for the effect on:

https://www.johnsenschmaling.com/projects

This is the code added for the :hover event:

<style>
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-anchor:hover {
  opacity: .2 !important;
  display: block !important;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  transition: all .3s ease-out;
 }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
  opacity: 0;
  display: block !important;
  position: absolute;
  text-align: left;
  padding-left: 4%;
  bottom: 5%;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  transition: all .3s ease-out;
 }
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
  opacity: 1;
  color: hsl(0, 0%, 25%) !important;
  display: block !important;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  transition: all .3s ease-out;
 }
 </style>

I would like the effect to work like the Jasper template main page which works on all devices:

https://www.squarespace.com/templates/jasper-demo

I try on your site and get 2 results:

- Touch the item, hold a little and scroll page down/up => it run the hover effect correctly

- Touch the item, hold a longer time and it will show the panel as you right click on a link

I think it is fine for me as a client on your site

If you need it works more sensitively, like I said before, we will need to implement some business code

My testing for your current state

Thanks for taking a look.

When I test on ipad or iphone the response is not sensitive enough.  Were you able to check out the Jasper demo.  The mobile sensitivity is much better and I am hoping to achieve that.

What would be needed to implement business code...?

What I find odd is that when I preview the page in the squarespace editor on my ipad, the page functions perfectly.  When I view it live on my ipad, the effect doesn't work nearly as smoothly.

On 12/30/2022 at 8:07 PM, Jnsn06 said:

What I find odd is that when I preview the page in the squarespace editor on my ipad, the page functions perfectly.  When I view it live on my ipad, the effect doesn't work nearly as smoothly.

Hello @Jnsn06
Hello @Beyondspace

I am looking for the same effect for this portfolio page - www.wolk.studio/professional

Could you advice on the CSS for the tapping option on the mobile version? The idea is to tap 1 time to activate the hover effect and on the second tap to enter the portfolio project.

Thank you in advance.