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
    • Resources
  • 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: https://amethyst-tomato-gx6x.squarespace.com/ On hover there's a white overlay that appears on top of the buttons (due to the opacity linear gradient if I'm not mistaken). How do I remove it to keep it pure black on hover?
  2. 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; }
  3. 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
  4. Hi All- I'm working to make my image title backgrounds transparent so that I can apply a section background without having a weird box: I'm using an Image Card block and found out how to make the image portion of the block and content section have a transparent background, but cannot figure out how to make the Card title have a transparent background. Happy to provide any additional information. Thank you in advance. Greg
  5. Site URL: https://www.cheesierpasta.net/thor-home I am wanting to remove the section[data-section-id="6273f7fff7a2200fbdd3ec88"] 's white background so that the page will have the gradient and I dont need to worry about scaling issues. I am unsure how to do this.
  6. 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.
  7. Site URL: http://www.chairs.works/ Hello! I would like to remove a low opacity overlay from my lockscreen in version 7.1 I don't know if its because it was for 7.0 or what, but I tried a method I found before and it didn't work. Also, when the site loads the password field is automatically selected, which causes a white rectangular outline to appear around it. I would like to remove this or make the outline black. I don't think you'll need the site password, but if you do it is: chairchair All help is greatly appreciated!
  8. Could someone please help me to apply this sort of image hover http://www.erinsanger.com/ to a gallery reel? I would love for a hover the gallery images to darken and then for the caption text to show on top in white. I saw this previous thread, which served a similar function but for a gallery page: Thank you!
  9. Site URL: https://www.moove.studio/ Hi all, I am trying to recreate the effect seen on the www.wonder.vision website where the text on the left next to the images on the right, is visible on in the middle. So when you scroll down, the text below is revealed, and the text going upwards is removed elegantly. Reference image below. Is this possible, and if so, how would I implement this for web display only? I'd also love for a hover-effect on the images that they slide a bit to the right when hovered over with the mouse, just like in the wonder.vision website. On that note - I noticed that it doesnt seem to be possible to have the images aligned to the actual right-side of the website. Is there a way to actually do this? Kind regards, Calvin
  10. Site URL: https://sponge-dalmatian-cgjy.squarespace.com/ Hello all, I have a portfolio page as my cover page currently with the layout Hover: Fixed. I have icons that are supposed to be transparent as the hover images, but Squarespace is adding a black overlay on top of them. A Squarespace agent let me know that this is an known issue but that I would currently need to use custom coding to get rid of the overlay. I was wondering if anyone here could help me out? The website is password protected, the pw is 123. I've attached a screenshot of what I mean - I do not want the gray background there. If there's also a way to reduce the actual transparency of the image itself through custom coding so that the project titles can be seen and not just blend in, that would be great as well.
  11. Site URL: https://hettieroberts.com/canvas-art-prints I would be grateful for any advice on this issue. I have searched the forums and tried several things but not found one that works. Five template: When hovering on my product images (only the thumbnail images on the main product pages, such as on the site URL I listed), they fade slightly, so the images wash out a bit as you move over them. I would like to have this effect completely removed (no fade or transition upon hovering on any product images... or any images on the whole site if that’s easier). Can anyone suggest a way this might be accomplished? Thanks so much!
  12. Site URL: https://www.maartenvanderwilt.com/personalwork 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 have been trying to find older codes to use but nothing seems to work for me. I want to keep the white font. So like this : https://www.maartenvanderwilt.com/personalwork but ten dark instead of the lighter version
  13. 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
  14. Hi Guys, Can anyone tell me how to achieve transparent text on color background? Like the way contact us is written.
  15. 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?
  16. 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"
  17. Hey, Upon clicking my click through images , a black square appears. I want to it to be completely transparent when I click it. How do I do that? the same thing happens on any image that is clickable including “list” items or a “gallery” image that uses click through. Thank you
  18. 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.
  19. 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!
  20. 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; }
  21. 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; }
  22. Site URL: https://www.kimsedgwick.co.za/ Looking to add hover text and an opaque white block on my index page - collection gallery. As it stands, the text is currently over the image permanently, I want this to only appear when you hover over the image. There is currently a faint opacity that appears when the image is hovered over, I want to decrease the opacity so It becomes a bit more white and you see less of the image. See images attached for reference. My current site and what I am looking for, the images attached of what I am looking for has a solid white block and the text appears when hovered over but I would prefer mine to be less opaque than it is now but not solid . Thanks so much!
  23. 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!
  24. 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?
  25. Site URL: https://www.meganandcampbell2020.com/ Hello, I am looking to remove the gray block of color behind my logo header when a user scrolls down on my site. See attached for photos. When you are just looking at the site "home", the logo lays nicely over the background image, but as the user goes to scroll down, a gray block appears and remains there. I'd like to remove the block of color all together or change it to not have anything appear, like I have on this website. https://www.meganandcampbell.com/ Thank you in advance for your help!
  • Create New...