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


Forums

  • 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
  • Squarespace Forum Club Guidelines's Topics

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 38 results

  1. 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?
  2. 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
  3. Site URL: https://mattandersondesign.com/ Hi there, I would like to apologize if this question has been asked before. I've looked around for a bit never found an answer. I'm trying to achive different color overlays on each of my images like the examples site I've given. Upon inspecting his code as well as another website (https://sarahbethmorgan.com) I've notice both of them have the "index-section index-page-transition-link" class. Currently I am using the Novo 7.1 theme on my website https://www.artcidentally.com, and used the design>color section for my overlays. Thank you for your help.
  4. Site URL: https://juergenstrohmayer.net/nubuke-extended I want to remove the color overlay from all gallery blocks. I am using a slideshow with captions. In the Rally theme the captions are on top of a color overlay that fades upwards from the bottom of the image.
  5. Site URL: https://www.thislandisdigital.com/test-rectangles I've already located code to create a hover effect from a recent post (though it needs to be written for every single thumbnail). All of the tutorials and tips I've found so far replace one image with another, though, whereas I would like to overlay an image on top of the currently hovered thumbnail. The effect will basically place a border, some glowing vignette, and a few stylized notches as if looking through a camera. The test index I'm using can be found here. The image I'd like to overlay is here. My current hover code looks like this (with some extra toys thrown in while I experiment!): /* On hovering over a specific block, affect its image. */ a.project:nth-child(1):hover img, a.project:nth-child(2):hover img, a.project:nth-child(3):hover img, a.project:nth-child(4):hover img { //visibility: hidden; opacity: 50%; //border-radius: 150px; filter: blur(2px); //grayscale(100%); //invert(100%); transition: all 0.5s; } a.project:nth-child(1):hover .content-fill, a.project:nth-child(2):hover .content-fill, a.project:nth-child(3):hover .content-fill, a.project:nth-child(4):hover .content-fill { background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e83d5e07a31383b2b77d2d3/1585698273099/Thumbnails_HoverImage_02.png); background-size: 100%; //or: cover; background-position: center center; background-repeat: no-repeat; } How do I make the image appear over top of the thumbnails? I don't really want to fade their opacity to reveal something behind them.
  6. How / can you add an overlay only for a specific banner section in the Impact Template (paralax is ON)?
  7. Site URL: https://www.healinginnovations.com/product-page I am using the Hayden template and trying to build out this design (attached - don't judge images, waiting on new assets), but am running into some roadblocks when it comes to any split images/solid colors (the hero, for providers & for patients sections). I found some articles saying to do gallery blocks, but I can't seem to get the text over the solid block. Also, I need these gallery blocks (or whatever I end up using) to go edge-to-edge with no padding (like a banner image would). Need suggestions on how I can make this design reality!! I'm also anticipating some issues with the "need more information" section as well so that it has zero padding around it as well.
  8. Hello! I'm using Brine and would love to add an overlay to a Gallery Block in Slideshow mode. I believe it needs to be done with CSS, but I just *cannot* figure out the selectors/code. I've tried playing with the opacity but it just turns things white and I actually want to darken it up. I'd also love to shrink the vertical size of the main slideshow but no luck their either. Sadly, I can't share the site because it's a not-yet-released app 😞 My bad code.... /* Trying to style overlay of slideshow .sqs-video-wrapper, .slide .sqs-gallery-design-stacked-slide .loaded { height: 50vh !important; background-color: #27241D; opacity: .95 !important; } */ Any help at all would be greatly precipitated!
  9. 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
  10. Site URL: https://pentagon-chinchilla-zyj6.squarespace.com/ Hi there! Wanting to add a single headline on top of a slideshow gallery page that says persistent as the images cycle through. Could anyone help me out with code for that? THANK YOU!!!!
  11. Hi I am trying to change the image size of the first image/header image for each project. Trying to scale the image down to same size as the rest of the project images as seen in attachment 002.jpg. Also there seems to be a colour overlay on the top image, can this be removed? Thanks in advance.
  12. Site URL: https://prism-tetra-4e6b.squarespace.com/home-2 Hi there! Can anyone help me figure out a way to add a logo, text and two linkable buttons on top of a banner gallery in the hero area of my home page? Here's the link: https://prism-tetra-4e6b.squarespace.com/home-2 PW: Fanaro I'm attaching a screenshot of what I'm trying to have it appear like, keeping mind the full-width background image is intended to be a gallery/carousel of 6 transitioning images (as it functions in the link above). I can do this with Thanks!
  13. I have worked thought a few CCS mods to get my gallery image block lightbox to look they way I want it to. I am having a problem getting the lightbox opacity to be 1 or full background with no opacity. Every time I inject a CCS mod the element z-index and opacity revert back to opacity:0.98 I have tried several variation but nothing works. Here is the latest CCS I injected. .yui3-lightboxoverlay-content .sqs-lightbox-overlay .sqs-lightbox-overlay-default.light.element { z-index: 10000000; opacity: 1; }
  14. Hi All, I am using Haydyn template which features an overlay on all of the banners, however i would like to adjust the overlay for one of the banners so that it doesn't affect the rest of the site. Any help appreciated!
  15. Hi, I'm using custom CSS to add a colour overlay on images using the thread here. Everything works perfectly except the coloured box is leaving a strip of the image exposed at the top. Can anyone see what could be causing it? It happens on images of different proportions / sizes. Thanks a lot, any help would be much appreciated! Imogen
  16. I am creating a website using the Henson template (Tremont family). I have used the Design > Site Styles to set up overlay opacities that I like, but there is one customization that does not seem possible with the built-in styles: At the bottom of each "Portfolio" index (/brand, /data, and /web), the "collectionDesc" reappears, overlaid on the media image for that index. I would like to add a white background overlay at 95% opacity when this happens, so the image looks ghosted and the text is more legible. I can accomplish this by setting the Overlay Opacity under "Index Overlay/Background Colors" in Site Styles, but the images then continue to look ghosted on that page and throughout the site when the collection is active (mouse is hovering over the collection menu). Is there code injection I could add to the header of the 3 portfolio index pages (brand, data, and web) or to the site-wide Custom CSS that will set the "Index Overlay/Background Colors" to #fff 95% opacity only when the "collectionDesc" is visible? You can view the in-progress site at the link below: https://gar-opossum-4ch5.squarespace.com/ password = chameleon I have also attached images to help demonstrate the issue: 1. How the "collectionDesc" looks at the bottom of the /web index with no "Index Overlay/Background Colors" visible (opacity set to 0) 2. How I want the "collectionDesc" to look at the bottom of the /web index * 3. How I want the collection media to appear on hover * * note: #2 and #3 are mutually exclusive using the built-in Site Styles (increasing opacity to achieve #2 ghosts out #3 and vice-versa) Any guidance on resolving this issue would be much appreciated!
  17. Site URL: http://www.mitchbakker.com I'm running into a problem where two Index Sub-Pages are not retaining proper padding when scaled for mobile only. Specifically, the third sub-page which includes a quote (/book) is improperly laying over the second sub-page (/about) which has an Image Block with Overlap design. Please see SS where the Quote is way too far up... I have checked the Site Styles > Padding, all seems in order. Any suggestions? Am I missing something? Thanks!
  18. 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; }
  19. Site URL: https://cinnamon-guitar-2zdw.squarespace.com/brand-styles Hello, I'm trying to change my headline text for in the overlay images to a custom font... The codes I've tried do not work, and I'm unable to target the specific area with the Developer Tools in Chrome. Can someone please 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. Hi, I decided to use squarespace instead of wordpress this time since I didn't want to mess around with coding. I have a portfolio for which color accuracy is very important and just realized that the style Carmine I'm using is adding a very faint overlay on some of my images. This only happens when I add images, galleries are not affected by the issue. There is no simple switch to turn off this overlay so I'm wondering what CSS code might help me with this. Note: I do not want the overlay on any of my pictures so it's fine if it gets disabled completely.
  22. Hello. Im trying to find a way of having a colour overlay appear on the hover of an image within a gallery. I dont want this effect across every single image just certain ones within a gallery. Please see the site below for reference - as you hover over a project the colour pink overlays. https://megalodon-rose-khl5.squarespace.com/ password: Testingpassword Reference - https://www.contrastcreative.co.uk/
  23. Hi!! I was wondering how I can target the header overlay text to be a different coloured font on one of my pages. I also want to get rid of the shadow behind the text but only for this page. The section is the "What We Do" index page of my homepage. I want the font to be #hsl(195, 7%, 23%). Here is the URL: https://penguin-roadrunner-4c8m.squarespace.com/ and password: Skyfall77
  24. Hi all, I have played around in 7.1 for a while now, and I've taken the step to build my first client site using it. Exciting! I am using a Headline section with full width background image with overlaid text and button — standard out the box stuff. The client has requested that the background image becomes a slideshow so that there are 3 images it cycles between. Unfortunately it's not currently possible to add text and a button to the Image slideshow which would have been the easiest solution. I know that using Brine is an option but I don't want to step backwards to 7.0 at this stage. Would anyone happen to have code or could instruct me on how else I could go about this? Screenshot attached is how the current Headline section looks. The site is jos-kitchen.co.uk but currently doesn't have any of this easily accessible as it's in holding page state. Thanks in advance, Sarah
  25. Hey everyone! I just watched a video on adding a specific banner overlay on one image but it wasn't working. (I think I did something wrong with the section ID) I wanted to add a banner overlay on this page and this page only using custom CSS https://www.jfkjets.com/aerial-photography Thank you!
×
×
  • Create New...