AltitudeDesign

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

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

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

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?

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

WebP would really help the SEO on Squarespace; some of my blogs have a lot of images and need speeding up!

It does seem that this thread has been going on for a bit too long now without an update for this...   especially as the platform themselves use WebP as the format for their primary image on their website.  This does seem like it's time for some sort of support, so that we can all benefit from the advances that they themselves seem to see the value in.

Try
.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; } Let me know how it goes on your site

Thanks so much my friend

Thanks so much my friend

.header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(1) { display: none !important; } You made a good site with blob animation

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

what is your site url so we can provide code for the template

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