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

Search the Community

Showing results for tags 'overlay'.

More search options

  • 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
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 89 results

  1. Site URL: http://furikiteboarding.com I've currently editing my front page of my new site and I'm trying to get rid of a blue overlay color that makes my image look dull. It seems to be part of the product. section when you choose it. can someone help me get rid it. See image below.
  2. Site URL: https://sunflower-bluebird-jb83.squarespace.com/ I am trying to hover an image over another image that exists in a photogrid. Example the grid is all happy faces and when you hover over each of them, it's an image of sad faces. Basic example but that's the point I'm trying to get at. Site pw is getwell2020
  3. Site URL: https://mouse-trout-epjy.squarespace.com/members Hello, I am trying to add a blue overlay on hover to the images in a portfolio grid. On Members page, you can see I've added a grid of images with a working blue overlay on hover using the following code: .layout-caption-overlay-hover .image-caption-wrapper { background-color:#66C8F0!important; opacity: 0.6!important; min-height:100%; top:0!important; } .layout-caption-overlay-hover .image-caption-wrapper, .layout-caption-overlay-hover .image-caption-wrapper { color: transparent; } Below the contact form you will find another grid with a handful of projects - this is the portfolio grid. The client would like to be able to add the individual members pages as portfolio projects - so I am trying to code the portfolio grid images to have overlay on hover - am I right in saying this isn't possible because they can't inherit the caption overlay? site password: spong123
  4. Site URL: https://mwejps3lrkma.squarespace.com Currently on 7.1 the Gallery blocks with links have no hover/interaction on them, so it's quite hard for users to tell they're clickable links. (example: https://mwejps3lrkma.squarespace.com) How easy is it to customise it so that we get a basic hover effect? Even a token 10% opacity on hover? Or even better display the 'Alt' text in the centre to match the styling on the Portfolio gallery blocks (example: https://mwejps3lrkma.squarespace.com/) I thought something like the below would be a quick fix but it doesn't seem to work; .gallery-grid-item img:hover { opacity: 0.9 !important; }
  5. Site URL: https://www.covid-19connect.com/thankyou Hey all, hoping for some help. When I upload vector images (saved as JPG) with white backgrounds, some come up with a grey-looking overlay. Any ideas on how to remove the overlay? Here's a link - the first image comes up with a clean white background, and the second two do not. How do I fix this? https://www.covid-19connect.com/thankyou
  6. Site URL: http://www.hyejukim.com Hello! It's my portfolio grid: overlay page. First, I've tried to separate title as the first picture above by putting "<br>". Is there another way to divide sentences? Second, I want to leave the first sentence (=COOL UNCLE), and change the font and size of the second sentence (Branding). Please help me out with how to change it! Thank you 🙂
  7. 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?
  8. Site URL: https://www.corn-apricot-zn88.squarespace.com/ I just added poster styled images to my blog. When I type the text, the background is now opaque white and the image is not visible. I have looked at the site colors and don't see anything wrong. I have not knowingly changed the CSS code to make it white. I tried to add transparency in CSS, but I can't seem to locate the div name of the text background overlay. When I put CSS to change the overlay the text and background both change. I there to only be text visible no background PW for the site is BA47.
  9. Site URL: https://www.littleboxes.shop/boxes-soon/p/wi20-texas-wedding Hi, Has anyone noticed that uploaded images on Squarespace appear darker than original images? I've tried adjusting any overlays that would be affecting my image color, but even with all overlays set to "transparent," the color difference is noticeable (if you compare the white paper in the screenshot below, you'll notice our original photo is brighter than the one we've uploaded to Squarespace). Any suggestions or tips here? If no one knows of a style setting I can update to change this, is there a site-wide code I can use to brighten the photos a tad? Thank you!
  10. Site URL: https://www.thisisaspace.com/ Hello, I'm looking for a code to reduce the height of the overlay caption section on my image blocks. See image for more details. Thanks!
  11. 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
  12. Site URL: https://matey.app Hi, I've applied some code to have image cards appear smaller in mobile view. Is there a way I can exclude image poster blocks from being altered? Currently, my image poster block appears crushed on mobile. Any idea how to have it appear with the same margins as the other elements on the site in mobile view? I've attached a screenshot below. Thanks!
  13. Site URL: https://www.benjohnsonphoto.com/ Hello, I'm wanting to alter the mobile menu overlay colours, however I am unable to find it in the squarespace design settings or use the correct CSS. Currently, it has a black background and white text. I would like to reverse this so the background is white and text black. Cheers, Ben
  14. Site URL: https://dolphin-springtail-544f.squarespace.com/ Is creating a hover overlay on gallery image captions—like the screenshot attached—possible? I'll also attach a link to the hover overlay I would like in action - https://www.squarespace.com/designer/profile/3586977 Thanks in advance.
  15. I'm using overlay images my landing page that I want to link to a new page. This is how they look before I add a link to the image: This is how they look when I add the link. They shrink: Did this happened to any of you? Is it a Overlay Image problem? Is it a problem of the source images? The source image size is 1500x600. Any ideas? Thanks!
  16. Hi! I am having issues removing the overlay altogether on my inline image (my logo). I pulled the overlay slider down as far as I could, but it still isn't as sharp and opaque as it should be. Any CSS help?
  17. 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!!
  18. Hey all, I am trying to create a specific effect for my website. I have an image and on Hover I would like to display a black overlay on slight transparency+some text formatted in a specific way. I tried to do it with the Squarespace default way but I couldn't manage so I tried to use the HTML+CSS customization but still I am struggling. Something with the way I am specificing the text size based on the vw is breaking things. Any help? Adding video and image This is the CSS .container { position: relative; width: 50%; } body { font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; padding: 2vw; background-color: rgba(0,0,0,0.7); } .container:hover .overlay { opacity: 1; } .Title { color: white; font-size: 5vw; position: relative; text-align: left; } .SubTitle { color: white; font-size: 3vw; position: relative; text-align: left; } .Synopsis { color: white; font-size: 2vw; position: relative; margin-top:30%; text-align: left; } .credits { color: white; font-size: 1.8vw; position: absolute; bottom: 0.5vw; text-align: left; line-height:70% } .overlay {color: white;} This is the HTML file <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Passione</title> <link href="../css_sheet.css" rel="stylesheet"> </head> <body> <div class="container"> <img src="passione.png" alt="Avatar" class="image"> <div class="overlay"> <div class="Title"> Passione </div> <div class="SubTitle">a John Turturro Film</div> <div class="Synopsis"> <p><p><strong>Synopsis</strong><br></p> <p>Filmed in Naples, Italy, Passione is the fourth film directed by John Turturro and released in the United States in June 2011. The movie chronicles the rich world of contemporary Neopolitan music tracing the influences of European, African and Arabic cultures in a wild, colorful and sexy musical adventure. Passione was present at the 67th Venice International Film Festival, won the Capri Cult Movie Award, the &ldquo;Movie film festival of Salerno&quot; and the City of Loano prize.;</p> <p><br></p> </div> <div class="credits"> <p><strong>Director:</strong> John Turturro</p> <p><strong>Role:</strong> Production Coordinato</p> <p><strong>Release:</strong> June 22nd 2011</p> </div> </div> </div> </body> </html> Screen Recording 2020-08-08 at 14.18.52.mov
  19. Site URL: https://www.mariejeanneb.com Hello there! I am enjoying the overlay title from the Camino Template (Tremont Family) on some of my pages, but can't seem to find a way to remove it on my home page (the only page I don't want it to show up). Is there a CSS code I can inject on my home page to remove it? My page is mariejeanneb.com. Or if there's a code to add it manually to only the pages I desire, that would also be good. Thank you!
  20. Site URL: https://conch-armadillo-kf4s.squarespace.com/ Hi, Is there a way to reduce the width of the mobile menu overlay that slides in from the right side. I only want it to be about 50% of the screen. Site URL: https://conch-armadillo-kf4s.squarespace.com/ Thanks in advance.
  21. 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.
  22. Hey! I'm trying to remove the overlay color from my background images so that my background images look exactly as they should without a color overlay. When they background color is white, the image looks washed out, when it's black it's too dark. I've tried numerous code injections into Custom CSS but no luck. Help!
  23. Hi, first post here. Is there a way of removing colour overlay on images and elsewhere site wide with CSS.I'm currently having to manually turn it off everywhere for each of my colors themes. Thanks Neo
  24. Site URL: https://tealthomsen.com/ Hello, I have added a custom font through CSS that I am using for my Site Title and Tagline. I would like to use this same font for the Page Titles and Descriptions that appear as an overlay in both my gallery pages and regular pages. Examples below - Gallery Page - https://tealthomsen.com/spaces - I want to target the page title, "Spaces" and the text below it to use a custom font. Regular Page - https://tealthomsen.com/about - I want to target the page title, "Info" to use a custom font. I have tried .page-title and .page-description but no luck. The CSS I am currently using to customize the font fo the site title and tagline is below. @font-face { font-family: 'PostalServiceOutline'; src: url('https://static1.squarespace.com/static/54adbf3ce4b02f8ed4174b5d/t/5f1f4ca997bb38421796f203/1595886764469/CN-Postal-Service-Outline.otf');} @font-face { font-family: 'PostalService'; src: url('https://static1.squarespace.com/static/54adbf3ce4b02f8ed4174b5d/t/5f1f4c9daae24951927da33b/1595886749856/CN-Postal-Service.otf');} .site-title { font-family: "PostalServiceOutline";} .site-tagline { font-family: "PostalService";}
  25. Site URL: https://www.authorophelia.com/ Hello everyone, I'm trying to get it so that the projects I have in my portfolio have a default background, which an image with transparency will sit on. I essentially want the projects in the portfolio to be visible as squares on my home page. As you can see from my website, you wouldn't even know "Project #2" existed unless you happened to rollover the right side of the screen, and you wouldn't know that the book was a button at all without rolling over it. Is there a simple setting I'm missing?
  • Create New...