dogtug

I may have figured out how to make this work...? I added this code to the 'Code Injection' > 'Header' section: <script> document.addEventListener("touchstart", function(){}, true); </script> <style> element:hover, element:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none /*only to disable context menu on long press*/ } </style> And here is my current code in 'Custom CSS' section for my buttons: element:hover, element:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none /*only to disable context menu on long press*/ } //smooth button hover effect a.grid-item[href*="/project-one-f5w4d-r8dad"] { &:hover img { visibility: hidden; opacity: 0; transition: ease-in-out 250ms !important; } img { transition: ease-in-out 250ms !important; } .grid-image-inner-wrapper:after { visibility: hidden; } &:hover .grid-image-inner-wrapper { background-image: url(https://www.japannakama.co.uk/wp-content/uploads/2023/05/Kawaii.jpg) !important; background-size: cover !important }} a.grid-item[href*="/project-two-ky966-ft22h"] { &:hover img { visibility: hidden; opacity: 0; transition: ease-in-out 250ms !important; } img { transition: ease-in-out 250ms !important; } .grid-image-inner-wrapper:after { visibility: hidden; } &:hover .grid-image-inner-wrapper { background-image: url(https://i.ibb.co/kXSC8bj/09-57-33-900-512.gif) !important; background-size: contain; background-repeat: no-repeat !important; }} Seems to work now on mobile on my end? Allowing me to activate the gif / hover effect by pressing on my mobile screen once, and then pressing a second time to activate the link. Keen to see if it works on mobile for others too!

Website password: little So for 'project 2' in my animations portfolio page, I've got the image set to a .GIF once you hover over it with your mouse. This works perfectly on desktop, however on mobile it's very finnicky. How can I get the hover effect / gif playing to work on mobile by ONE CLICK / touch on the image on mobile, and a second touch / click to take them to the corresponding link? This website does exactly what I'm after in mobile version: https://wiltonlander.com/work

Did you ever figure this out? I’m trying to achieve the same 1-tap hover effect for mobile so it appears as it does on desktop

Sure it's https://www.samdavis.art/ My logo stays static after the initial animation plays in my regular browser (which is what I'm after), but whenever I go into an incognito tab and check the logo it'll replay again on each new page which I don't want.

Yep I did 🙂 I just had to edit the actual image in photoshop again to remove any white space first.

I’m looking for a way to keep my animated logo gif static / not reload when you click into another page on the website. I believe the solution to this would’ve been AJAX, but Squarespace 7.1 doesn’t have this… I’ve read some things about using iframes that might be promising? How can I achieve a single, static element across all pages that DOESNT reload with the rest of the page? The perfect example I’m trying to achieve can be found on: https://timpeacock.com/ - the logo animates on the initial page load but stays static across all other pages. Thanks!

Hi I'm trying to get the image at the bottom of my page to cross over the site's bottom margin without extending the page / scroll bar. I've managed to get it how I wanted in the CSS code preview, but my live site is not showing the same results. Here's my code that works in preview: div #block-yui_3_17_2_1_1726137007164_2425 { position: absolute !important; left: -930px; top: 0px !important; } div #block-yui_3_17_2_1_1726137007164_2425 .sqs-image { justify-content: flex-end !important; } div #block-yui_3_17_2_1_1726137007164_2425 .sqs-image> div { position: absolute !important; bottom: -260px !important; } body.homepage article section:first-child { min-height: unset !important; } This is how I want the image to appear at the bottom of the site: This is how it's currently appearing in my live site: Thank you!