AltitudeDesign

Thank you Paul

Can some help / point in the right direction on how Squarespace made this neat scroll effect as you scroll down? - https://circleday.squarespace.com - the top bit of the site drops

Answering my own question, use this script instead - https://ryandejaegher.com/easy-scrolling-text-in-squarespace/

I’m trying to do the impossible and make the text scroll across the screen in time with a film with voiceover I have the Scrolling Text Marquee set to maximum but it still isn’t fast enough. Is there some script I can inject to speed it up further? Hope an expert can help

Squarespace could we have an update to when we should expact WEBP images to be enabled?

Squarespace are you able to give us an update on when we will be able to upload WEBP images?

Yeah that’s right, they go to another website. What do you think I need to add?

Site URL: http://eqgrp.com/portfolio On this page I have used the code to create a hover effect over the images. However I can get the link to work when they are clicked. Here is the code I am using #collection-5f69f44101c29b17224c76fe{ .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover :focus+.image-caption-wrapper{ height: 100%; max-height: 100%; background: rgba(3,75,110,70%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper p{ color: #fff; } }

Please look here for the solution -

OK I think I have solved it myself. Here is my code if anyone needs help with this in the future: .summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,0); position: absolute; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:25px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(254,237,0,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { opacity: 1; }

@tuanphan Are you able to help at all? 🙏

Thank you for your reply mate Still not acting right, I hope you can help further? https://graphicstructures.squarespace.com/projects (pass: preview) There is still this odd gap underneath and also you are only able to click on the title not the whole box? Here is the code I am using now: .summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,.9); position: absolute; width:100%; height:100%; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:20px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(254,237,0,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { opacity: 1; }

Sadly not, sorry the links are the wrong way around above. The summary block is now on the projects page. Can you help me at all?

I am sorry to confuse you. I want this page - http://graphicstructures.squarespace.com/projects and the way the overlays work to look like this page - http://graphicstructures.squarespace.com

Site URL: http://graphicstructures.squarespace.com If you look at this page I have managed to give the blog masonry a hover title and yellow overlay - http://graphicstructures.squarespace.com/ (pass: preview) I am trying to replicate this on a summary block on this page. I am nearly there but it's a bit buggy, isn't working well on mobile and also there is an odd white space under the images? http://graphicstructures.squarespace.com/projects (pass: preview) Here is the code I'm currently toying with: .summary-item img { transition:all .1s ease !important; } .summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,.9); width:100%; height:100%; position: absolute; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:20px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } .summary-title a:after { content:''; width: 100vw; height: 100vh; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .summary-item { overflow:hidden !important; }

Site URL: https://graphicstructures.squarespace.com/ I have successfully added a hover over effect on my blog masonry layout - https://graphicstructures.squarespace.com/projects (pass: preview) I now want to replicate the same effect on the homepage https://graphicstructures.squarespace.com/ (pass: preview) using the summary wall block. I am a bit stuck, can someone help? The code I am using for the blog is below: .blog-masonry .blog-item-summary { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; opacity: 0; transition: all .3s ease; height: 100%; } .blog-masonry .masonry-ready .entry.is-loaded:hover .blog-item-summary { cursor: pointer; opacity: 1; transition: all .3s ease; z-index:100; } .blog-masonry .masonry-ready .entry.is-loaded:hover img {opacity: 0.9;} .blog-masonry .blog-item-summary { display: flex; place-items: center; justify-content: center; } .blog-title {background-color: rgba(255,255,255,0); color:#000 !important;} .blog-title a:after { content:''; width: 100vw; height: 100vh; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .blog-item-summary { overflow:hidden; } .blog-item-content-wrapper { margin-left:-15px !important; margin-right:-15px !important; }

You need to put <style> </style> around the code

You are a genius, worked perfect, thank you

The blocks don't click through though, only the piece of text. Can you help?

Site URL: https://graphicstructures.squarespace.com/projects Hope someone can assist with this issue. My site - https://graphicstructures.squarespace.com/projects - pass: preview Below is the code I am currently using for the title on hover however only the title text links and not the square itself. How would I like the whole block? blog-masonry .blog-item-summary { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; opacity: 0; transition: all .3s ease; height: 100%; } .blog-masonry .masonry-ready .entry.is-loaded:hover .blog-item-summary { cursor: pointer; opacity: 1; transition: all .3s ease; z-index:100; } .blog-masonry .masonry-ready .entry.is-loaded:hover img {opacity: 0.9;} .blog-masonry .blog-item-summary { display: flex; place-items: center; justify-content: center; } .blog-title {background-color: rgba(255,255,255,0); color:#000 !important;}

Site URL: https://www.ayreshaynes.com/projects Hey Squarespace Family Could someone help me with this? I have looked everywhere. I am trying to replicate something like this - https://jamiefobertarchitects.com So when someone hovers over the blog image the title appears on a black background

Thanks so much my friend

Url is https://chancesschool.squarespace.com and pass is “preview” im on 7.1 thanks so much

I have the code for removing from desktop and showing on mobile only but the reverse doesn't seem to work for hiding a nav item from mobile nav? @media(max-width: 768px) { .header-nav-item--folder:nth-of-type(2) { display: none !important; } }