Jump to content

Search the Community

Showing results for tags 'overlay'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. Hi, So I used the CSS given to me the first time I asked this Q and changed the mobile view option to 20px (10 was too tiny). But I'm still having the issue that when the size of the project thumbnails is reduced due to screen size or the platform it's viewed on, the text doesn't reduce with it to stay within the image. I get these scroll tabs when the title is longer. I've attached a screenshot.
  2. We're looking to switch to Squarespace, but we want to keep the functionality of the portfolio section of our Wordpress website (see link and images). Specifically, I'm wondering if it's possible and how to create overlays that pop up when you click a specific images (in our case, logos) within an image gallery. These overlays would need to include additional images or videos, URLs, text, and a button to exit the overlay. Does anyone know if this is possible and/or have example of this or something similar on a Squarespace website? Many thanks in advance.
  3. Hello! I'm building a website and want to add caption overlay to some images so when I hover the cursor over them they change color and captions appear (within these same images I would like to add links to videos as well) Here is the website currently in progress https://lanternfish-goose-wczf.squarespace.com/config/ I've included the images where I want to add the captions. Here is an example website of someone who has done this, incase I didn't explain it clearly enough! https://www.lucas-sader.com/ (when you hover over their client list the captions come up) Any help would be great! Thanks!
  4. I have noticed that my overlay text on my portfolio project images does not scale to fit the image when viewed on smaller screens / platforms. Is there a way to ensure the text is always contained within the constraints of the image it overlays? Thank you
  5. On the carousel on the home page I'm trying to add a black color overlay (30% opaque or something in that range) onto the images so the titles are easier to read. Does anyone have code that can help me accomplish this? Thanks!
  6. My Website is https://rotordroneservices.squarespace.com I'm having issues with he mobile version drop down menu having loads of blank space between the top and social buttons as shown in the attached photo. Either I want to remove the drop down completely or add shortcuts to scroll to sections of my one page website. If anyone has any suggestions, please send them my way. I can't figure it out at he moment. Thanks
  7. Pass: bconsult How do I put a black color overlay over the images and change the opacity?
  8. Hello, I'm trying to figure out a way of disabling the subtle move–in–from–bottom animation that appears on mobile with the overlay menu. The white to black transition is fine, I'd just prefer the menu items not to move in.
  9. What I want to do is pretty simple and straight forward, though after searching for the last 40 minutes, I still have not found an answer here. I want my text left aligned in the overlay menu (which it is), but with the button still centered. I'm sure this is an easy fix. Maybe I'm too tired, but I can't seem to find it. www.legalese.media
  10. Hey there - When people open my website in mobile view, there are too few visits to the other parts of my website. This seems because the menu showing these other sections is hidden in the mobile overlay. People just don't click that menu icon or fully register what its use is (esp. after they have already started scrolling down my landing page). I actually really like how the mobile overlay works and would therefore love its opened state (listing the sections) to be my landing page when people visit in mobile view. Obviously in desktop view there's no issues as the different sections of my website are already visible by default 🙂 Hope that makes sense: is there a small chance this could be possible?! My website is www.samr.co Thanks for any help! Sam. ps: i have a bit of CSS added already to force single column view (when in mobile) on a two column masonry grid. I mention this as I'm not sure if I know how to stack up different CSS instruction sets, would I just add a } before adding any new code? (sorry if that's a terrible question - this is all a bit too far out of my normal knowledge zone).
  11. I added a custom, fixed <div> with some text on my home page. It looks and works great, except for in mobile view when the mobile navigation burger is clicked and the menu slides out. The fixed <div> that I created is on top of the menu-- see image below. I have tried to find every CSS selector to change the z-index so that the activated navigation menu is on top of everything else, but have had no luck. Can anybody help?
  12. Hello Friends, On this page (https://goldfish-radish-4xds.squarespace.com/the-other-conquest -- Password: 2023), in the slide show under 'Images with Comments' title, I'm hoping to customize the overlay text formatting so that it's more legible. I would like to add some padding from each side, make the type slightly larger, and if possible, add a color overlay with 40-50% opacity at the background (to be shown when hovering the mouse over). Is this possible? Thank you so much in advance! Ozan
  13. You can see in one of the images below the text overlaps the website logo. I've tried several things I've seen online and none have resolved the issue. The custom code I've used to play about with the spacing is: /*Make split navigation*/ .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: px!important; } .header-nav-item:nth-of-type(4) { margin-right: 300px!important; } .header-title-logo a { z-index: 800; position: relative; } I'm unsure if I need to add additional code, remove the code I've got. But every computer I've checked this with on Safari has the same issue. (I've done the latest Mac OS update and that hasn't changed anything, as well as clearing safari cache)
  14. Does anyone know how I could set a max width for the caption hover titles? Some of them are a bit longer and so there is some overflow (screenshot attached). I've included the caption overlay code being used below. I've tried to insert a few things, but none of them achieve breaking the longer titles into 2 lines. This is the code that is currently styling the hover overlay & titles: // PRESS (DESKTOP) - PRESS ARTICLE HOVER // section[data-section-id="637554a5c0417c276a38ffea"] { .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(134, 128, 107,0.8) !important; /* overlay color */ outline: 1px solid #F3F2EE; outline-offset: -10px; height: 100%; max-width: unset; padding: 0; opacity: 0; }} .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 48px !important; /* caption font size */ color: #14161B; /*caption font color */ line-height: 1em !important; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } // Bring the Link Forward // section[data-section-id="637554a5c0417c276a38ffea"] { .gallery-grid-image-link:after { content:''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; }} // PRESS - GALLERY CAPTIONS // .gallery-caption p {white-space:pre} .gallery-caption p {text-align:center} .gallery-caption p:first-line { color: #F3F2EE; font-family: 'Trento+Typeface'; font-size: 6px !important; letter-spacing: 0.35em; line-height: 8em; } .gallery-caption p { color: #F3F2EE; font-size: 15px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } https://kristen-rivoli-interior-design.squarespace.com/press pw: Rivoli123
  15. Started a new gallery section and wanted to have a transparent (or opaque) overlay on hover like in the portfolio option Here is a screenshot of where I think the code is to copy, paste and modify but really I dont know what I'm doing.
  16. Hi - Im new to css and ran into a hiccup. I have a code to create a sticky effect for the page sections. However, it cuts off a section "How to..." and the top of the section remains sticky while scrolling - not displaying full section - until the next section is scrolling up, in this case "FAQ." How can i fix this? Here's the code: #page .page-section {position: sticky!important; top: 0px!important} html {scroll-behavior: smooth}
  17. Hi - Im new to css and ran into a hiccup. I have a code to create a sticky effect for the page sections. However, it cuts off a section "How to..." and the top of the section remains sticky while scrolling - not displaying full section - until the next section is scrolling up, in this case "FAQ." How can i fix this? Here's the code: #page .page-section {position: sticky!important; top: 0px!important} html {scroll-behavior: smooth}
  18. Could anyone advise on how I can change the layout of the mobile overlay menu? The text is arranged in a very narrow channel, meaning that the items with two words are going onto two separate lines although there is plenty of space! Any help would be greatly appreciated 🙂
  19. i'm trying to get an overlay on a full-bleed reel for an effect like this https://coreenergetics.nl/en/nice-en/ i've tried lots of ways but either the images aren't stand-alone, or i can't get text overlaid, or it's not automated. can anyone point me in the right direction? i've looked for answer tothis issue but nothing yet. here's what i tried a 7.1 image carousel set to slideshow:reel, section fill screen, with a text box overlay looks good but the pics don't fill the page https://www.ra2.toolsandmethods.com/home-carousel-with-text-overlay a 7.1 gallery section set to slideshow reel, full bleed, cropping, looks good but no text https://www.ra2.toolsandmethods.com/home-gallery-reel-full an auto layout gallery looks great but is not automated https://www.ra2.toolsandmethods.com/home-auto-layout
  20. Hello guys I have an issue with text on image. I would like it to be showing up in the middle of image while hover on image. I there any way to do that? Now Im using Brine and caption overlay on hover but it is on the bottom and on black background.
  21. Site URL: http://bjornsorensen.com Wizards please help :) I've tried numerous code and have given up! See the portfolio section. I want the overlay text as 2 separate lines. First line with bold weight 30px and second line with regular weight 20px. I also want a black overlay? How can I do this please?
  22. Site URL: https://www.mosellewakepark.fr/ Hello, I have an issue with my new PC and WebGL. All animations and effects using WebGL (like the new scroll block or the liquid, film grain, ect..) are not showing at all. I've tried on Chrome and other browers, none of them seem to display the effects. On this website: https://www.mosellewakepark.fr/ I can't see the liquid effect with this PC but can see it on others. When going to https://get.webgl.org/ I see the cube, everything works fine on every other website but on squarespace, nothing works... Any idea of why that's happening ? Thank you.
  23. Hey all, I have inherited this site from another web designer and am stumped on how to find the code for this gray overlay menu and how to remove it. It's not something I'm able to click on and edit, and I'm a newbie with code so I haven't been able to identify what code relates to this feature. Please help!
  24. Hi, does anyone know how to add shadow to a text block? I want to make the white text easier to read on the banner on this page: www.peacepaintingcenter.org. I believe adding a shadow behind the white text would help with accessibility. Does anyone know how I can do this in CSS? Thanks!
  25. HEY! The overlays on every section are driving me nuts. I’m seeing my colors in a murky version of what they should like. For instance, the orange in my logo looks brilliant and the orange in body text looks like it got covered in dirty water. I know how to edit individual blocks to remove the overlay for images manually, but I was hoping I could add some CSS to remove them all in one swoop site wide.
  • 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.