Jnsn06 Posted December 30, 2022 Share Posted December 30, 2022 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. Link to comment
Beyondspace Posted December 30, 2022 Share Posted December 30, 2022 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Jnsn06 Posted December 30, 2022 Author Share Posted December 30, 2022 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> Link to comment
Jnsn06 Posted December 30, 2022 Author Share Posted December 30, 2022 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 Link to comment
Beyondspace Posted December 30, 2022 Share Posted December 30, 2022 (edited) 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 Edited December 30, 2022 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted December 30, 2022 Share Posted December 30, 2022 My testing for your current state 1160038749322828346.mp4 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Jnsn06 Posted December 30, 2022 Author Share Posted December 30, 2022 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...? Link to comment
Jnsn06 Posted December 30, 2022 Author Share Posted December 30, 2022 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment