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://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!
  2. 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/
  3. 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%; }
  4. 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
  5. 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
  6. 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.
  7. 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; }
  8. 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;}
  9. 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.
  10. 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!
  11. 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
  12. Hi! I'm really new at this and I've done some research, but haven't totally figure it out yet how to add CSS code to my site. I want to add a white hover overlay with "heading 3" text centered on it in black, on my gallery and also on separate images. Can someone help me to do this?
  13. Site URL: https://misotasty.com/ I'm having trouble adjusting the positioning of the text on my overlay image on mobiles so that the text is shown below the image instead of on the left side like it is on the desktop view (first attachement). I'm trying to get it so that it looks like the way it shown on the Squarespace mobile preview (second attachment) but instead it looks like the one in the third attachment which is the same layout as the desktop layout (first attachment). Please help!
  14. 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.
  15. Hi there, I'm having trouble creating a transparent text-block, that overlays a gallery-block, with a page-down button in it. It is a requirement for a client that it looks exactly like the RESPECT FOR ALL section if you scroll down on the following web page: https://wierdais.co.za/ I've inserted the gallery block with a slideshow with no issue, but I'm having trouble creating the overlay with added button, and it being transparent. Thanks!
  16. Site URL: http://www.southernsunevents.com @tuanphan @bangank36 I've used the following for the image resize but now when I try to adjust the overlay text large sections get greyed out and banner images get cut/rearranged. Any ideas? First shot attached is before and second is after trying to adjust text. Site: www.southernsunevents.com Password: sse2020 Code I used for image resize... @media screen and (max-width: 640px) { .Parallax-item:nth-child(1) .Index-page-image { background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e61166c9f9a545c228981fa/1613063589855/82.N%26N-416_id109374907.jpg?format=2500w'); background-position: 48% bottom; background-repeat: no-repeat; background-size: 125%; } .Parallax-item:nth-child(1) .Index-page-image img { display: none; } } @media screen and (max-width: 640px) { .Parallax-item:nth-child(2) .Index-page-image { background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601d80b87affa87cb4212442/1614193166900/Jenni+Chandler+Photog+1.jpg?format=1500w'); background-position: 48% bottom; background-repeat: no-repeat; background-size: 125%; } .Parallax-item:nth-child(2) .Index-page-image img { display: none; } } @media screen and (max-width: 640px) { .Parallax-item:nth-child(3) .Index-page-image { background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e6116f73d879f7082676743/1609349400689/BLAIRSVILLE_GEORGIA_WEDDING_MEGAN%26KYLEDSC_7045.jpg?format=1500w'); background-position: 48% bottom; background-repeat: no-repeat; background-size: 125%; } .Parallax-item:nth-child(3) .Index-page-image img { display: none; } }
  17. Site URL: https://lifelab.world/landing-page-sample-1 Hello Squarespace team, I am kindly seeking for help regarding adjusting the overlay background for the slideshow gallery. I used this code which I also found in Squarespace forum but I cannot adjust the overlay background at it overflows below the text. Another question is can this be adjusted in mobile view too? #block-yui_3_17_2_1_1647341220455_3672 {.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-center .meta { max-width: 50%; top: 380px; bottom: 600px; margin: 0 !important; transform: translate(-50%, -50%); width: 50%; text-align: center; height: 85% !important; max-width: 50%!important; } } Thank you so much in advance!🙏
  18. Site URL: http://www.chairs.works/ Hello! I would like to remove a low opacity overlay from my lockscreen in version 7.1 I don't know if its because it was for 7.0 or what, but I tried a method I found before and it didn't work. Also, when the site loads the password field is automatically selected, which causes a white rectangular outline to appear around it. I would like to remove this or make the outline black. I don't think you'll need the site password, but if you do it is: chairchair All help is greatly appreciated!
  19. Site URL: https://whale-mushroom-t6kh.squarespace.com I'm not sure why when I change the image lock to a card (anything other than inline), it adds an opacity over the image. How do I remove the image overlay?
  20. Site URL: https://zarafinlay.squarespace.com/ Password: ZARA My client is unhappy with how large the "overlay on hover" is with her captions and would like to minimize the padding above and below the caption. I assumed/hoped that I could solve this by adjust the font itself but that did now work. I also tried tinkering with CSS that I normally use to increase the amount of padding but I could not get that to work either. If anyone has a bit of code to throw my way or an alternate soluion, I'd be super grateful!
  21. Site URL: https://www.imanalias.com/home Hello, There is a left/right shift on mobile where you can basically grab the screen and move it left or right. When I add the code below, I get this white rectangle just below the navigation bar on mobile. Does anyone know how to fix this please? I cannot figure this out! Thanks so much!!! @media screen and (max-width:767px) { html, body { overflow-x: hidden; } }
  22. 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
  23. Site URL: https://sellingsalamone.com Hello! I'm trying to anchor the image overlay to the bottom of the first section here - currently, I've been able to restrict its size, but I'd like it to be at the bottom, not the top. .section-background-overlay { opacity: .5; height: 25%; position: absolute; bottom: 0; }
  24. 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!!
  25. Hello, Is there CSS or a plugin that will add text when hovering over images in an images block on a Wells Template page, and going full width. Similar to: https://colleenchrzanowski.com/client-work Here is the page I would like to update with the CSS or Plugin: https://www.andyryanphotographer.com/projects Thanks in advance.
  • Create New...