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
    • 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

  1. On the shop page of the hyde template, prices will show when you hover over the corresponding image. I would like to disable the hover effect so that the price will always be displayed on mobile devices. This is what I have: @media only screen and (max-width: 768px) { .product-price { pointer-events: none; } } I have the mobile breakpoint set to 768px in the site styles section so thats why i used that number.
  2. I am on trial mode for 7.1. Current site is 7.0. I want a very specific thing. Which is gallery pages of images of my artwork in mosaic mode where the image description is on overlay on hover for each image and then i can click through to another page for each image where you cna see deatils shots and more info etc. I can;t do the overlay feature and it is making me insane
  3. Site URL: https://magnolia-hawk-8wyh.squarespace.com/ Password: thisisart I figured out how to turn off the hover effect in my portfolio grid using the below code, but now it's hard to read on the mobile. Can someone help me with code to put a overlay gradient on mobile only or a suggestion to make the text legible? Thanks! // Portfolio Text on Mobile // @media screen and (max-width:640px) { .portfolio-text { opacity: 1 !important; } } @media screen and (max-width:767px) { .portfolio-text h3 { color: white !important; font-size: 26px ! important; } }
  4. Site URL: https://grasshopper-saffron-ffl9.squarespace.com/ Hi, How do I reduce the height of the overlay caption on these images? See screenshot:
  5. Hi there, I'm building on template ID 5c5a519771c10ba3470d8101 , a 7.1 template. And I'd like to explore having the header bar floating on top of the first section on transparent, and having different image blocks stacked full bleed without any border,like this page http://clo-studio.com/studio/ So far I can only have the image block without padding (left right) using the code below, but I can have the whole section full bleed or found any suitable coding for the header effect. .sqs-block.image-block { padding: 0; } Can anyone please suggest what custom c
  6. 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 } }
  7. Site URL: https://www.jorigoh.com/studioportraits Hello, I want to achieve an overlay animation appearing upon hovering my images in a gallery grid. Something like when you hover the cursor over the images in the grid gallery and it turns dark with caption/title and you can click to a new page. I can add a clickthrough URL, but it just displays my cursor changing into the clickable icon. No hover animation overlay whatsoever. Appreciate it! Thanks
  8. Site URL: https://corn-apricot-zn88.squarespace.com/ I made a custom overlay for my slideshow so that the images scroll beneath the text, but now I have a giant white spot at the bottom of the website. I can't seem to pull the height of the box up. Ideas? Password is BA47
  9. Site URL: https://mouse-trout-epjy.squarespace.com/members Hi, I have a gallery grid with a coloured overlay - but my image links don't work while the overlay is active. Here is my code for the overlay: .gallery-grid-item:hover .gallery-grid-item-wrapper:after { background: rgba(102,200,240,0.6) !important; content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } When I disable this code the links on the images work again. Can anyone help with this? It is fundamental that the images have links - I ca
  10. Site URL: https://www.indigowellnessgroup.com/ Hi, I would like to add an overlay color for the images in just this section as I did using DevTools (blue), but cannot figure out how to change this in custom CSS. The page is #home-conditions and Ive tried several things but cannot get it to stick. Thanks!
  11. Site URL: https://www.satorgarments.com Is there any CSS codes where I can change each font option to a different colour on the mobile overlay menu, attached is a screenshot
  12. Site URL: https://www.angelcityadvisors.com/our-impact What would be the code to change the color of the header overlay text (the Header 1 (Overlay) color) for just one page on the Mojave template? Its business version
  13. Site URL: https://www.guarnizioni-ghirardelli.com/prodotti Hello all, I'm currently finalising a site ( https://www.guarnizioni-ghirardelli.com/prodotti ) and I am using the Falodu template. What I'd like to achieve is to have a different hover state for each thumbnail of the portfolio items. At the moment, all pages have a solid yellow overlay, but I was wondering if somehow it's possible to trigger/have a different overlay (specifically a picture or potentially an SVG) for each page/item of the portfolio grid. I've attached a screenshot as it might illustrate what I'd like to achie
  14. Site URL: https://www.nailsdidla.com/menu-lashes Hello, I am trying to add a fixed background image to 3 pages of my site: Nails, Lashes, After Care (all pages aside from the homepage) This code was working for me but it messed up the layout of the home page: .section-background { position: fixed; } Any suggestions? Thanks, Christine
  15. 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?
  16. Site URL: https://finch-amphibian-bc3g.squarespace.com/ Hi, I've managed to change the text and colour of the overlay but I would like to change the image overlay on hover to cover the whole image and also for the transition to fade in. See it in the 'Our Clients' section at https://finch-amphibian-bc3g.squarespace.com/ (password: emarketing123). Any help appreciated. Thanks, Emma
  17. Site URL: https://www.crliquidators.com My drop down for the different categories we offer (All Products ↓) has more categories than what fits on the page and it runs off the screen. How do I get it to either show multiple columns or at least scroll so people can see all of the categories in the overlay?
  18. Site URL: https://thomson-street.squarespace.com/about password: ts2020 I have enabled the overlay effect on the pages of my website. I would like to slow down the effect of the overlay disappearing as you scroll down. how can I do this?
  19. Site URL: http://andrewmorrisphotography.co.uk Hi there, Is it possible to move the gallery info overlay to below the images as opposed to over the images in a Brine gallery? Thanks Andy
  20. 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; .g
  21. Hello, White parts of my images are gray in images blocks. See attached images. It seems to be a CSS issue because my imported images are properly white (not gray). Contrary to Squarespace 7.0, Squarespace 7.1 style editor doesn't seem to make possible to directly correct this. How can I fix this? What is the CSS code to correct/cancel this ? Thanks a lot
  22. Hi all, I need help on making this happen. I am trying to design my homepage. I want an image on the right which is overlayed by a coloured box with text on the left which spread totally to the left side. I tried using the image blocks but it doesn't seem to work to my liking plus when I tried to spread the colured box to the left It extends the page making it moveable left to right which I dont want. Someone please help me out here. I am really lost. Thank you in advance 🙂 I added a photoshop edited version on how I want it to look like. Please help. Thank you again
  23. Due to the colours of the logo and the backgrounds on each page, my website requires different version of my logo on some pages than others. The most challenging part appears to be on mobile, when you enter the overlay menu, the background is white, so I need to use a black version of my logo rather than the white version used on most pages, including the homepage. How can I do this? I'm using the Colima template.
  24. Site URL: https://www.littleboxes.shop/boxes/p/wi20-new-adventure 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
  25. Site URL: https://www.tophuillustrations.co.uk I've been struggling with this for a while, I've looked for hours for how to target this menu's font size but none have worked so far. I just want to make these nav links' font size smaller! I've tried: #overlayNav #mobileNavWrapper nav div label a.Mobile-overlay-nav-item nav.header-menu-nav-list *
  • Create New...