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://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!
  2. 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
  3. 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 🙂 !!
  4. 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!
  5. 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!
  6. 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; }
  7. 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!
  8. 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.
  9. 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;}
  10. 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!!
  11. 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.
  12. 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 : )
  13. 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; }
  14. 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/
  15. 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
  16. 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!
  17. 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
  18. 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%; }
  19. Site URL: https://awmenikah.squarespace.com/ Hi everyone, I have a case that I want to change my mobile menu background and menu items colors differently for each page. Is there any ways to do it? My site URL: awmenikah.squarespace.com Pass: sikatmbuy Thank you in advance! Cheers, Wendy
  20. Site URL: https://www.creativeinteriors-online.co.uk/ Hi guys, I hope you can help me. How can I add text overlay on top of each of the three carousel images you see on the Homepage of https://www.creativeinteriors-online.co.uk/ website? Your help would be greatly appreciated please. Many thanks Claudia
  21. Hello, I'm using the Adirondack template and I have a slideshow for images on a page. I like the idea of having a caption appear when I hover over the image, and have that option checked in the "Design" tab of Edit. The problem I have is I would like the text to be center aligned in the overlay (on hover). Currently, it's left justified. Note: I do see the dropdown in the "Design" tab that allows me to move the overlay (on hover) to a part of the image. Ex: center, bottom left, bottom right, etc. But that just moves the overlay's placement on the image. I'm looking to move the text within the overlay itself. Furthermore, I don't see any place to adjust the text's font, color, size, etc. of the overlay. Does anyone know have any code or steps that can be inserted to allow me to make these adjustments? Thanks so much. Cheers.
  22. Site URL: https://walrus-springtail-ljhd.squarespace.com/ Hi, I am trying to add titles overlaid on gallery block images (ideally h1) with a shadow behind. I've had a bash with following which appears to work while adding the css but is wiped out once saved. Can anyone please help? Password: 1mageproblem Would be forever grateful. thanks .sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper { position: relative !important; text-align: center!important; color: white !important; } .sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title { height: 60px !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%)!important; font-size: 45px !important; background: rgba(0, 0, 0, 0.3)!important; color: #f1f1f1 !important; }
  23. Site URL: https://bridal.chenesebean.com I'd like to remove the menu overlay color in my website. I don't need it and I didn't see an option to turn the color option off. FYI, it only appears when scrolling. Thank you.
  24. My problem with a 2k video on a website isn't the sharpness of the image, it's rather that the entire look is flat - highlights are not clean, and the shadows are muddy. Can anyone offer any suggestions? The video on Vimeo: https://vimeo.com/707522094 The video on the website: https://bluedoorcafebakery.com Thanks!
  25. Site URL: http://mcmahonvoice.com This is a workaround because the template I'm using doesn't keep the integrity of a transparent logo across over pages, but there isn't a way to delete the site header (and logo) across those pages either. I am looking for some code to help me remove the logo you can see in the picture. Thanks
  • Create New...