Jump to content

AltitudeDesign

Circle Member
  • Posts

    32
  • Joined

  • Last visited

Personal Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. Answering my own question, use this script instead - https://ryandejaegher.com/easy-scrolling-text-in-squarespace/
  3. 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
  4. Squarespace could we have an update to when we should expact WEBP images to be enabled?
  5. Squarespace are you able to give us an update on when we will be able to upload WEBP images?
  6. Yeah that’s right, they go to another website. What do you think I need to add?
  7. 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; } }
  8. 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; }
  9. 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; }
  10. 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?
  11. 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
  12. 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; }
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.