Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'overlay'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://parrotfish-asparagus-tyfd.squarespace.com/config/pages Hi all, First time poster here. I have forced the hamburger for desktop display, but don't want the menu to overlay the entire desktop screen. Do you have any suggestions for code to reduce the overlay on desktop to ~50%? Thanks
  2. Hello Squarespace community, I would love to reproduce the banner overlay (title of category + header/logo) who fade-disappear when scrolling down , it's a feature from Tremont in 7.0 and would love to have it on my SS 7.1 website please. What I'm talking about : https://tremont-demo.squarespace.com/gallery-tremont Also, if possible, the auto slideshow -only on mobile- at home page . Here's an example : RPReplay_Final1662987276.MOV I'm still building my site on trial. Hope you have enough elements ! Thanks a lot for your help 🙂 Shayn
  3. Site URL: https://derricksaenz.com Hello, I am trying to fix the language selector screen of my mobile navigation window. It is all whited out, and I need it to look like the rest of the navigation. Which color setting changes that background specifically? I feel like I've tried them all! I have tested the other folders in the navigation, and they all work normally, so this isn't a folder issue, just the language selector. Hopefully someone will be able to help me with this. Thank you! Screen Recording 2022-09-08 at 11.22.15 PM.mov !
  4. Site URL: https://www.bettercontentcreators.com/ Hi, I'm getting this strange overlapping on my email sign up form when I embed it on my site. This comes up when someone is inputting their email address and has to confirm. I know this is a layering issue, but not sure how I would be able to fix it. Any help or ideas welcome.
  5. Site URL: http://www.maggiebrz.design Hi everyone! I just switched from 7.0 to 7.1. In the masonry gallery grid, I'm trying to add hover effects to my images- a color overlay and image caption on hover. I talked to customer support, and they told me that 7.1 doesn't support gallery hovers. I'm having trouble with the code, and was wondering if anyone had more luck than I did? I've attached a screen shot of how the site is set up. I'm trying to keep the full-bleed effect. I've been stuck in a rabbit hole working on this all day - thanks for the help!!
  6. Site URL: https://www.drmommymilk.com Hello SQSP! I have had an image as a custom mobile background as this site, but it is not showing up anymore. Any ideas & solutions are greatly appreciated. Here is the custom code .header-menu .header-menu-bg{ background-image:url(https://static1.squarespace.com/static/6129a21c0052b165b542a556/t/612c27d2bc615f30943c1122/1630283730785/Untitled+design+%282%29.png); background-size:150%!important;} Thanks!
  7. Site URL: https://www.azulstudio.co.uk/ Hello! my site URL is https://www.azulstudio.co.uk I am trying to add the colour + text overlay effect when hovering over the images on the "work" section. For example, when hovering over the first picture on the right of "WORK" I would like it to be covered with a solid color rgb (100,39,39) and a title to appear (in this case "Decorex 2021). I have tried several tutorials but none of them are working, as I feel that I am not targeting the specific image correctly. Any help is very much appreciated! thank you! Mariana
  8. Site URL: https://mouse-trout-epjy.squarespace.com/members Hello, I have a gallery grid with an overlay on hover to display the caption on each image. However, each image also needs to link to a page. It seems that when I add an overlay it disables the clickthrough link on the image. Anyone got any ideas on how to solve this? https://mouse-trout-epjy.squarespace.com/members site password: spong123 This is my code: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); height: 100%; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } .gallery-caption-content { font-size: 1rem !important; color: white; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; }
  9. Site URL: https://hooshdesigns.com.au/community-copy Hi all, Since some changes to Squarespace, I've been struggling to implement the text and colour overlay on hover to image blocks. On the page I'm working on, I have a row of six images with text blocks and accordions below them, and I'm looking to add a text and colour overlay on hover to each of the six images. I have been using different code I've found elsewhere, but have not been able to crack it. The effect I'm after is essentially this one, but I'm having trouble targeting classes/id's to make it work. https://www.w3schools.com/howto/howto_css_image_overlay.asp If anyone has any suggestions, I would be hugely appreciative!
  10. Hi, Does anybody know how to completely remove the overlay menu from the mobile version? I contacted the support and they informed me that this can only be accomplished by a custom CSS but I don't know how to do it. Many thanks, Inacio
  11. Hi, I am trying to add a simple overlay on certain image blocks (that have text on top) in Fluid Engine. I would like the overlay to be a simple color or gradient effect on hover. Similar to the image hover effects seen here: https://www.ulaval.ca/en anyone know of any code to achieve this? Thank you 🙂 !!
  12. Site URL: https://rabbit-gazelle-gbmt.squarespace.com/config/pages/62d6cfd3bebda16c2b0ff6d7 Hi, I've been transferring a lot of information from a Wordpress website to a new domain on Squarespace, and I've encountered a lot of trouble when trying to customize image blocks and header fonts. When I've watched tutorials on both, I've repeatedly been given specific code to use in the Custom CSS section, none of which has had an effect on my website. I can't figure out how to add a poster image block, adding image blocks varies drastically from what I've seen in videos (my design options are much more limited), and I haven't been able to import a font to the website. Does anyone have a straightforward way to troubleshoot image blocks? I don't know if my version of Squarespace is messed up or if I'm just incompetent. Please help!
  13. Site URL: https://www.imanidavis.website/new-page-2 Hello, I am trying to add an overlay to the image blocks when someone hovers over it. The image block is an inline. I want the hover to only be around the actual the image, not the text. Any help would be greatly appreciated. Thank you!
  14. Site URL: https://www.4101empedrado.com/services Anybody tell me how I can get the link underline to go away? I'm currently using all this css but the underline is still there and I'm stumped. Thank you! a { background-image: none !important; } .image-caption a { text-decoration: none; } .image-title a { text-decoration: none; } .image-subtitle a { text-decoration: none; } .sqs-block-html a { text-decoration: none !important; } body:not( .header--menu-open ) .header-nav-folder-item--active .header-nav-folder-item-content, /* desktop */ :is( [aria-current="page"], /* mobile */ [aria-current="true"] ) .header-menu-nav-item-content { background-image : unset; }
  15. Site URL: https://www.lecomptoirla.com/gallery Hi there, Is there a way to disable the grayish overlay function for only our Gallery page? I'm in the process of remediating our website, but don't see any option to disable or make transparent the Gallery page overlay in page settings, despite these Tremont template family instructions: https://support.squarespace.com/hc/en-us/articles/227024467-Tremont-template-family#toc-gallery-pages Also, is it possible to increase the Gallery header height (or bring down the Gallery images) so that our site title and navigation links are more clearly visible? Tremont template's default seems to position the site title and navigation links—both in difficult-to-read white text—directly over the topmost Gallery image, rather than placing them in a dedicated header. Thank you!
  16. Currently I see a flashing background color (white) before the content on my pages fully load. How do I change this color to something that matches my site? I am using the Carson template (7.0). Thanks in advance.
  17. Site URL: https://primemetny.squarespace.com Site URL: primemetny.squarespace.com Site PW: 1500 As you can see I am currently using the hamburger menu with slide in-out effect, I also added a dark overlay when the hamburger slide out, it was working just perfectly and then it happened to be presented as a full dark overlay sometimes, yes, it is sometimes but not always. This drives me crazy, can someone help me to check if there is any codes I can change? //overlay under menu .header-menu:after { content: ''; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: black; opacity: 0; transition: opacity 1.5s ease; z-index: -1; pointer-events: none; } .header--menu-open .header-menu:after {opacity: 0.6;}
  18. Site URL: https://selwyngoodman.co How do I remove the overlay menu on my website, ive tried everything but haven't seen the options. Can I get some help with this many thanks.
  19. Site URL: https://www.fornogusto.com/boutique Hi, I'm trying to remove the overlay of this boutique page https://www.fornogusto.com/boutique I found several answers for index page, but nothing for ecommerce page. Is there a way to target the intro section of this page in particular ? Thank you for your help : )
  20. How do I align the text to be over the photo? On the preview version its exactly how I want it but on the actual website text is extended across the page. Please find attached the screenshots of comparison. I am currently using a photo with a text block underneath and the following code to move the text onto the photo: #block-yui_3_17_2_1_1657493916918_3930, #block-yui_3_17_2_1_1657474776502_3397 h1 { position: absolute; z-index: 9; top: 90px; left: -30px; }
  21. Site URL: https://www.mechele.co.uk/ Hi, Does anyone know how to change the loading colour on a page, I get a flash of green for a split second before my image loads? Also if I scroll very high or very low on my site I can also see a green strip top and bottom. I've followed other threads on here and tried the suggestions with no luck. Thanks in advance. https://www.mechele.co.uk/
  22. Site URL: https://www.raquelmarquard.com/ Hi there On the mobile view of my homepage I would like to not overlap the image with text. The symbol R should be fully visible! Any way to address this via CSS? Thank you. Best, Sibylle
  23. Site URL: https://rabbit-primrose-wsww.squarespace.com/ I've looked at the built in style options and don't see the ability to set color overlay opacity for slides within the Banner Slideshow. Is that correct? And if that isn't a built in option, any thoughts on adding such via CSS? Thanks!
  24. portfolio 7.1 site mobile view on portfolio page hover overlay text does not appear whatsoever - I really need this text title to display on touch screens mobiles upon scrolling or selecting -how may i fix this? please take a peek at the portfolio page on any mobile view www.nadinenorman.com/artwork sincere thks to anybody who may be of help - nadine
  25. Site URL: https://www.hortus.com.au/about-5 Hello When in mobile the logo which has been overlayed using the below css is cropped. How do I get it so you can see the whole logo on mobile devices. Password: hortus Thanks Current css: [data-section-id="62b2b5e018398148f72b3fa9"]:after { content: " "; position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: url(https://static1.squarespace.com/static/604008e3f6c0190bbe9903bd/t/62b3f315b15ed050327cec58/1655960341821/Picture1.png); background-repeat: no-repeat; background-position: 50% 50%; }
  • Create New...