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
  • 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: http://harp-nonagon-xem5.squarespace.com Hey I've been trying to figure out a custom code for my gallery but haven't had any success. I want to add an overlay to the left and right images in my gallery so that the middle image stands out. I don't know if this can be achieved by setting padding parameters for the overlay or opacity so the overlay/opacity doesn't cover the middle image, or if there's a way to just overlay the left and right images so that when you scroll through the gallery the middle image is still overlay free. GoDaddy has this option available and I want to carry it over to my Squarespace account. The first image is what I have currently and the second image is what I would like it to look like.
  2. Site URL: https://www.51eggs.com Hello, I have a series of images with Caption Overlay on Hover on my home page, which I've managed to change the size of the overlay (previously covered 1/4 the lower portion of the image on hover) to cover the full width of the image, using the .image-caption selector. I would like to lighten up the built-in overlay a bit, but am having trouble targeting it. Adjusting the opacity of .image-caption works, but it makes the captions within the overlay semi-transparent as well. Any suggestions? Thank you!
  3. Site URL: https://puma-orb-9lss.squarespace.com/projects I'd like to have the portfolio overlay off when my website is viewed on mobile. Or in other words, I want all the text to show and not be hidden on mobile on the portfolio page. I should note that I have custom animations that override the overlay a bit. I added code such as the one below to prevent it on mobile. Maybe irrelevant but adding just in case. @media screen and (max-width:640px) { .portfolio-grid-overlay .grid-item .portfolio-title { transition: none !important } }
  4. Site URL: https://atlanticcityartsfoundation.org/49thblocksociety Hello! I'm looking for custom CSS to input an image in place of the text on this page's banner: https://atlanticcityartsfoundation.org/49thblocksociety So instead of saying "49th Block Society" there would be a PNG image in it's place, overlaying the background image in the header. Any help is appreciated!
  5. Hi, I'm using a couple of image blocks on the home page for my clients website set to the 'poster' setting which has the text and button overlaid on top of the image. I'm wanting to move the text and button down a little bit so it looks nicer (see attached screenshot). Does anyone know how to do this easily? I'm comfortable with using css so happy to use that if needed. Thanks in advance!
  6. 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?
  7. Site URL: https://tgtfresh.com/ The mobile information bar covers the social links in the mobile overlay menu. I did make the mobile information bar sticky, but it only affects it when scrolling down. Without any modification, since the overlay menu is accessed from the top of the screen, the social links are still covered. Is there any way to fix this, like hiding the mobile information bar when the overlay navigation is open? If not, is there a way to move/hide the social links on mobile? Thanks!
  8. Site URL: https://www.offpaper.design/portfolio-redo Hello! I'm re-doing a portfolio and need to make the Masonry Gallery grid with opacity overlays with clickable captions. (have made the page temporarily live incase anyone needs to look at the coding) I've found lots of threads on here that has gotten me to a certain stage, but as soon as I add in a link, the overlay disppears? If anyone can help, that would be great, thank you!
  9. Site URL: https://www.thefirst.vc/portfolio Hello, so i created image overlay effect for my portfolio page complete with custom css. It is working perfectly fine on desktop browser (https://www.thefirst.vc/portfolio) but its completely not working for mobiles. Can anyone suggest what can did i do here? How can i make this responsive? Code: <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> .flex-container { position: inherit; display: flex; } .img1-wrap { position: relative; overflow: hidden; width: 280px; padding: 50px; } .image { width: 2000px; } .overlay { display: block; position: sticky; bottom: 0; left: 0; right: 0; background-color: #ad0909; overflow: hidden; height: 0%; transition: .5s ease; } .img1-wrap:hover .overlay { height: 100%; } .text { color: white; font-size: 12px; font-family: Reggae One; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } </style> <link href='https://fonts.googleapis.com/css?family=Reggae One' rel='stylesheet'> </head> <body> <div class="flex-container"> <div class="img1-wrap"> <img src="/s/BBBook" alt="Avatar" class="image"> <div class="overlay"> <div class="text">BBBook is a community-based reading platform that facilitates collaborative study for university and school students.</div> </div> </div> <div class="img1-wrap"> <a href="https://www.cash.live/"> <img src="/s/Cash-Live-Logo.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Cash Live is a live-streamed, free to enter poker game show featuring daily tournaments where players compete for cash.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://codeblugames.com/"> <img src="/s/CBG" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Code Blue Games is developing 6Degrees, a Third Person Action Adventure/Tower Defense game.</div> </div> </a> </div> <div class="img1-wrap"> <img src="/s/Acces-Job" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Accessible Jobs is developing an online job portal focused on helping people with disabilities find accessible work.</div> </div> </div> </div> <div class="flex-container"> <div class="img1-wrap"> <a href="https://dineeasy.ca/"> <img src="/s/dinenew" alt="Avatar" class="image"> <div class="overlay"> <div class="text">DineEasy is a one-stop platform for powering the digital infrastructure for restaurants, cafes, and hotels.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://www.gamejobs.ninja/" target="blank"> <img src="/s/gamesninja.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">GameJobs.Ninja is a recruitment platform focused on the video games industry.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://www.myhubly.com/" target="blank"> <img src="/s/hubli" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hubly is building technology to power the future of financial planning and advice.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://www.ludare.com/" target="blank"> <img src="/s/Ludare" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Ludare Games Group is a publisher of free-to-play mobile games featuring top-tier licensed intellectual properties.</div> </div> </a> </div> </div> <div class="flex-container"> <div class="img1-wrap"> <a href="https://pepper.gg/" target="blank"> <img src="/s/pepac.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">PEPPER lets gamers and organizers discover and create local and online events for cash prizes. Acquired by TGS Esports.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://storiiitime.com/" target="blank"> <img src="/s/StoriiTime" alt="Avatar" class="image"> <div class="overlay"> <div class="text">StoriiiTime empowers online influencers to earn more with less work through its no-code narrative game templates. </div> </div> </a> </div> <div class="img1-wrap"> <img src="/s/Startup" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Startup Arena is building a model for co-working startup spaces in a post-COVID world.</div> </div> </div> <div class="img1-wrap"> <img src="/s/SuperCommerce" alt="Avatar" class="image"> <div class="overlay"> <div class="text">SuperCommerce is a buyer, operator, and scaler of ecommerce websites. </div> </div> </div> </div> <div class="flex-container"> <div class="img1-wrap"> <img src="/s/v2ac.png" alt="Avatar" class="image"> <a href="https://victorysquare.com/" target="blank"> <div class="overlay"> <div class="text">V2 Games is a developer and publisher of casual mobile games. Acquired by Victory Square Technologies. </div> </div> </a> </div> <div class="img1-wrap"> <img src="/s/Vetsie" alt="Avatar" class="image"> <a href="https://www.vetsie.com/" target="blank"> <div class="overlay"> <div class="text">Vetsie is making veterinary care more accessible by leveraging innovative technology to transform pet care.</div> </div> </a> </div> </div> </body>
  10. 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!
  11. Site URL: https://woweelive.tv I need help for a script that just outright removes the hamburger menu and the resulting overlay from the Header of our site in Mobile view. On Desktop we are great, but the built-in SquareSpace options are not helpful for removing this from Mobile.
  12. Site URL: https://www.petitjeanjewellery.ca/ Hi folks. First time poster. I'm new to CSS, HTML and JavaScript but have used custom code for this website. Working on this site: www.petitjeanjewellery.ca, password: julesjewels My question surrounds the shop page. The actual shopping experience takes place at a different URL, https://petitjean.jewelershowcase.com which, before you ask, I cannot modify at all. The squarespace shop page therefore is just a list of hyperlinks pointing to that other site. When clicking on a shop category, early test users are finding it confusing to be linked away from the 'squarespace' environment and into a new one, with the familiar layout and navigation bar suddenly gone and no way to get back. So I'd like to alert them any time they click on a link beginning with "https://petitjean.jewelershowcase.com". A shadowbox-type alert that says "We are about to launch our online shop in a new tab. Ok/Cancel/Learn More." I'll attach a mockup image. I'm reading about modals, but can't seem to make them work in squarespace. Nor do I know how to make them appear only when a hyperlink is clicked that begins with "https://petitjean.jewelershowcase.com". References: https://www.w3schools.com/howto/howto_css_modals.asp https://www.solodev.com/blog/web-design/how-to-make-an-external-link-pop-up-modal.stml Any ideas? I've already been down the embedded iframe road, and don't want to go that route. Thank you in advance!
  13. 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!
  14. Site URL: https://sparhawk-lite-sarah-daye.squarespace.com/config Hi! I have custom css that is working perfectly EXCEPT the color of the overlay on the hover is not changing from black. Here is the code I used. // Image Hover Styling .image-caption-wrapper { color: rgb(255,255,255); opacity: 0; text-align: center !important; top: 0 !important; width:75%; height:75%; border: 2px solid #045370; padding: 3px; margin: 0px; position: center !important; pointer-events: none !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 80%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 20px !important; font-weight: semibold !important; color: #045370 !important; text-transform: uppercase; line-height: 150% !important; letter-spacing: 2.5px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #ffffff; opacity: .9; } .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper { max-height: 100%; } And I will attach a screen shot of what it looks like. Thank you!
  15. Site URL: https://blissfuldoulacare.ca/ Password to website is: blissful2021 I am trying to achieve this look on the homepage of this site. I tried uploading the image with the overlay (as one background image), but the text doesn't remain on top of the purple overlay. Any suggestions are greatly appreciated!
  16. Site URL: https://www.chriswohlers.com/ @tuanphan With the jasper template on desktop my title overlay is on hover, but how can you make it scroll for mobile only?
  17. Site URL: https://www.abcollectiv.com Hi, I'm trying to find a customisation for my Gallery Page in Index- I would like the text to appear when you hover over image instead of the small white dot in bottom right hand side. I'm using using a Tremont Template. Attached photos Thank you
  18. Site URL: https://www.stoneboundpigments.com/ I'm having trouble with some poster images on my home page, they appear with a light grey rectangle below the images. When I got into edit mode they disappear so I can't tell what it is. I've tried re-sizing the images and swapping them around but can't figure it out... Any ideas? I change the text overlay with CSS a while ago to have the text appear at the top and with a transparent background, but that was months ago and this only started yesterday. Thanks in advance! Here's some pictures of what's going on:
  19. Site URL: https://vibraphone-fuchsia-r9kk.squarespace.com/ Hi, I want to remove the CTA (book now) button from the overlay menu, but I want the button to be visible on desktop. Thanks in advance for your help !
  20. Site URL: https://www.pawmatch.org/ Hi Everyone: I'm a newbie to Squarespace and coding. I have been trying to change the overlay opacity just for the very first banner on the home page of the site pawmatch.org, and I'm not even sure where I have to place the code. Can anybody help me?
  21. Site URL: https://www.seasonalricecakes.com/partner-with-me Hello, I've been trying to figure out how to make sure the banner image doesn't overlap the header. What I'd like is Header (thin amount of white space) Banner image stretching across the width of the site Content A good example of what I'm going for is: https://cupoftj.com/partner-with-me My site: https://www.seasonalricecakes.com/partner-with-me I've tried the code in but putting tuanphan's code in either Design -> Custom CSS or Banner -> Advanced -> PAGE HEADER CODE INJECTION doesn't do anything. I tried derricksrandomviews's code as well and tried adding a spacer block, but the block's height wasn't changed by the code. Could I get some help? Thank you.
  22. Site URL: https://www.homeofcosy.com Hello, Can someone help me remove the second cart icon that only appears on the mobile overlay menu - please see attached!
  23. Site URL: https://www.nityzinser.com/ Hoping someone on this forum can help me. I am a graphic designer trying to re-vamp my brand and website. I have very basic knowledge of HTML/CSS so whenever I try to customize something, I tend to rely on these forums. Here is my portfolio site: https://www.nityzinser.com/ I have a gallery-simple layout with different images. Each image links to different password - protected individual pages. I used this code (see below) to create a custom overlay/description popping on while hovering. However, whenever I insert this code, the overlay prevents the image from linking out to the individual pages. Any help would be greatly appreciated. Here's the code I used: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(227,220,237,90); /* overlay color */ 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: 1rem !important; /* caption font size */ color: rgba(29,60,37,100) /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 1ms; }
  24. Site URL: http://thebrickhaus.com/ Hi guys, I've been having a bit of trouble with the product titles overlapping each other. It happens on some PC's, but especially on mobile and iPad OS. Any help or suggestions would be appreciated. Also, not sure if I can lump it into the same thread but does anyone know a way I can make my footer less spaced apart on mobile.
  25. 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!!
  • Create New...