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

Search the Community

Showing results for tags 'opacity'.

  • 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. 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; }
  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. I'm adding a short video to my site background. I'm using the Opacity filter at 35% and placing the video over a dark blue background. When editing, it looks great. As soon as I save the work and return to the main dashboard page, the background color defaults to white. The faded video still runs, but as I'm using white text, the white background renders everything just about illegible. Don't see any obvious reason for this happening, and the fact that things look as intended when I'm editing makes me think there's some kind of glitch in SquareSpace. Can anyone recommend a fix or workaround?
  4. Site URL: https://www.petitmille-studio.com.au/ Hi, How do I make the selection dropdown from my main SHOP page become opaque / blend with my background image. Currently it shows a plain white background instead. Thank you!
  5. Site URL: https://www.magnusriise.no/illustration Hi, I'm trying to change the color behind the picture/illustration when using a light box, in my gallery. It doesn't look good when you can see the other illustrations in the background. I found this code, that helped with the opacity: .yui3-lightbox2 .sqs-lightbox-overlay { opacity: 1 !important; } .gallery-lightbox-background { opacity: 1 !important; } It would look much better with solid white, so the white background in my illustration doesn't show. Anyone know what I can do?
  6. How can I control the opacity in a gallery grid when viewing single images in Lightbox mode? Currently the background images are too strong, I would like to fade them to around 20%. Thanks!
  7. Hello. I have started experimenting on a site for the past two days, my goal is to bring all my images together and from my understanding this is controlled my margins. But when I use my code I only manage to move one image into the space of another. I worked around this by using Full Bleed gallery blocks. This slightly resolves my overlapping issue but does not allow me to select individual images, so that I can make them opaque on hover, the entire block of 3-4 images is effected. I'm really new to web design, css and, coding I'm just trying my best to find answers online/YouTube . Am I approaching this issue correctly (doubt I am lol) if not how can I go about making what I am attempting to achieve in the correct manner. I hope you can see the images I have provided. Any advice is welcome. Thank you.
  8. Site URL: https://grouse-seal-j62k.squarespace.com/home-1 Hi there, I'm hoping someone can help, I've currently added a background color so that the text can be visible over the background video. However, I'd like to change the opacity of the background WITHOUT changing the opacity of the text. The CSS I'm using right now does both. This is what I have currently used. #block-d325a806d44c4257f1d4 { background: #000000; opacity: 0.5; padding: 5px; text-align: center; } Any help would be appreciated or if you have an even nicer looking way to do this (like say, with the big rectangular black bar) that would work too. The password is "prince"
  9. Site URL: https://lokalamico.com/ Trying to darken the opacity when I hover over images on 3 picture for the adventure.I want to be the 3 image to be darken or something like that when u go with mouse on it to let people know that they can click the imagine and another page will be opened. Any help is much appreciated!
  10. Site URL: https://www.moderndifferent.com/ How can I add an opacity hover effect for all image blocks? Thanks.
  11. Site URL: http://laurenkilbane.com Hello, I'm looking to add a hover effect to my block images, something that will create a color/opacity overlay on to the image when a visitor hovers over it. I have a caption displayed underneath that I want to leave visible at all times (so this overlay would be separate, just for the image). I've noticed it's especially hard to tell that these images are linked when viewing my site from a mobile device. Not sure if my template allows for customization like this, but any advice would be greatly appreciated. Thanks!
  12. Site URL: https://www.alexcosseyphotography.com/ Hi there I'm brand new to anything CSS related and have previously survived entirely within the limits of Squarespace's basic customisation. In a previous build of my website I was able to adjust the opacity of text box (I think it's called a Dynamic-Text-Container in CSS) that overlaps the image of a Collage image block. Since the introduction of the new Site Styles ta I can't work out how to adjust this. Currently my text box is completely opaque and I would like to see approx 50% through to the image underneath; is anyone able to share some CSS code that will allow me to play around with the opacity of all of the Collage image blocks at once? Many thanks in advance. P.S. Website in question is www.alexcosseyphotography.com; see "Family Photography", "Wedding Photography" and "Newborn Photography" image blocks on homepage.
  13. Hi! I am struggling to figure out how to have an image darken when the mouse hovers over it, rather than lighten to the color of the background. I'm working in the Forte template, into which I Frankensteined some code pieced together from various other forum posts and need some help with how to edit it so that the image darkens on hover(like this: http://demo.squarestud.io/grid-gallery-9). I'm pasting the code in use on the site below. Please help me, this is my first foray into code and I am totally clueless! Code: .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .4; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0px; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 0em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; pointer-events: none; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #000000; opacity: 0; text-transform: uppercase; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #000000; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } } header#header { padding-bottom: 20px; }
  14. Site URL: https://www.partners.forme.yoga Hey everyone, I am trying to change the overlay opacity of my background image, during a mobile screen size. When the black text is over the top of the picture, I would like the image to have a higher percentage overlay opacity. In desktop mode, its ok, as the text is over the white portion of the image. Can a CSS code fix this? https://www.partners.forme.yoga Matt
  15. Site URL: http://islaskincare.com Hi there, Rright now I have a mobile slide out menu on my website http://islaskincare.com. I've attached a photo to show what it looks like as of right now. I'd like to add opacity and darken the content behind the menu (when the menu is opened) so the user can focus on the menu and navigational links. Right now there's no clear differentiation between the menu when it's opened and the page content. So far I've just used CSS to make the menu. Thank you!
  16. Trying to darken the opacity when I hover over images on my portfolio site. Currently the opacity is too light and my title text doesn’t mesh well with my images. (See attached screenshot - Drew League example). Possible to do so? Any help is much appreciated!
  17. Hi, Can someone please tell me how to adjust the opacity of gallery background you can see in the attachment? Also, is it possible to move the naviagation to the top of my site rather it being in the footer? Thanks Steve
  18. Site URL: https://shopthebreak.com Hello, I need help making my header fully transparent. I want the logo and navigation to be visible while the background is transparent. However, my homepage is a products page, and I can't figure out how to code the header as ALWAYS transparent. Right now its transparent for about a second before it take on the site's background color.
  19. Hi everyone, an organization I'm helping out requested for their donation box to be made slightly transparent. Here's the code for the iframe, from Donorbox: <script src="https://donorbox.org/widget.js" paypalExpress="false"></script><iframe allowpaymentrequest="" frameborder="0" height="700px" name="donorbox" scrolling="no" seamless="seamless" src="https://donorbox.org/embed/ihraf-support" style="max-width: 500px; min-width: 250px; max-height:none!important" width="100%"></iframe> I tried to set up a div element within the code block and go from there, but I can't get it to work. Any ideas? Thanks!
  20. Site URL: https://reindeer-sailfish-bkep.squarespace.com/config/ Hi, I have two lightbox related questions: 1. I would like to have a fully white background behind the image when lightbox is open - currently it is transparent (screen shot attached), I have found some Custom CSS code from 2013, but this does not work anymore ( I am not doing it correctly) - anyone have any suggestions? 2. Is there any way to have comments on in lightbox - but not when it is in gallery format? Currently it is the inverse. Thank you. Beanie
  21. Site URL: https://tarpon-lavender-jbyy.squarespace.com/ Password to the site is: TEMP I'm having problems making the header opacity appear semi-transparent. The options when editing the header are simply solid colour, or fully transparent. What I'm trying to achieve is a semi-transparent header, that has an opacity of 50%. The site is on the Eldridge template, so Squarespace 7.1
  22. Hello, i need help and not sure if this possible but i'm giving it a shot. this is for my portfolio site on 7.1 I have a gallery reel with multiple projects inside of it on my HP...I want for all the entire reel to be highlighted with colored opacity and type so it indicated the entire reel is one section. i attached two images to show what i mean. please help! thank you Sam
  23. I have an issue with the effects of one code displaying only when I go to Design --> Custom CSS. It has to do with this code specifically, which creates a translucent-white background for text in a specified block: #block-848b3e4b0bc6ae27ccc5 { <---- my block ID background-color: #f0f0f088; padding: 1px; text-align: center; } Any ideas what went wrong?
  24. Site URL: https://www.jjsavea.com/ How do I make my header only ON the home page semi-transparent? I couldn't figure out how to adjust its opacity. Ideally, I'll like to have its light black that blend well with the image. I have it set to image overlay... Not sure what else I can do and I browsed other posting but it seems it doesn't work on my custom css. I'm using brine template.
  25. Site URL: https://jordandixon.co Hey there, I would like to know if it's possible to change the opacity/color of my 'Contact' button when on other pages. opinion: I like the bold red on the home screen, but on the 'work' and 'play' pages I find the bold red rather annoying. See attached photos... I'm using the Foster template Thanks!
  • Create New...