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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. Have several images (inline) that will be clicked on and pop in in the lightbox function. Lightbox currently offers light overlay and dark overlay, is there a way that the opacity of the overlay can be set so that the site page is partially visible behind the lightbox?
  2. 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.
  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. 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?
  5. 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; }
  6. 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
  7. 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.
  8. 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.
  9. 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!
  10. 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!
  11. 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
  12. 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.
  13. 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!
  14. 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
  15. 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
  16. Hi Guys, Can anyone tell me how to achieve transparent text on color background? Like the way contact us is written.
  17. 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?
  18. 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; }
  19. 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!
  20. 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!
  21. Hi. I'm attempting to change the opacity of my banners on mobile as the parallax is falling too far behind the text and making it difficult to read. Can anyone advise a CSS injection that would change the banner opacity on mobile only so that the banner is more faint? Many thanks in advance,
  22. Site URL: https://bailard-demo.squarespace.com/ Hi guys, fairly new Squarespace user here. I've started the creation of a website using the "Bailard" template (provided above) and for some reason I can't change the opacity on any of the image blocks used? Everything seems to have a tint to it that I'd like to get rid of. The Larger first image gives you an option to change it, but as you move down into smaller blocks that option is no longer available. I have very limited coding experience. Any help on this would be welcomed. Cheers,
  23. Site URL: http://www.caitlinhutson.com I have already copied a CSS to change opacity of the overlay on my posters when hovering. The code I used is the following: .image-overlay {opacity: 0; transition: .3s ease;} .image-overlay:hover { opacity: 1} It gives the effect of turning the whole block from my image to an opaque green, with the text showing in both. However, when not-hovering, I added a background color to my Title Text to make it easier to read, and I would like that background to fade out as the opaque green fades in (since the text is very visible on the green without that extra coloring). I tried to use the same format as above but can't figure out what the item is called to make this change. I am looking to do it to all of my posters, so a code that applies to all would be awesome.
  24. Site URL: https://wisteria-panda-z2eg.squarespace.com/home Dear All, I have been researching for days with no success. is it possible to have sections with „soft edges“? By that I mean, if I have a section with black background and it overlaps with a section with an image background, can the edge of the black section have something like a transparency or opacity gradient? I want it to look like the image and black blend / morph into each other. To complicate things further, the image also has a parallax. Check it out here: https://wisteria-panda-z2eg.squarespace.com/home pw: rotorsound The section with the instagram block should have the soft edge at the top. Thank You 🙏🙏
  25. I am very new to all this and cant seem to find a way to center the descriptions of the images in the gallery. It appears I need to add some CSS coding. Everything I've found seems to be out dated. I would also like to know how I could change the opacity slightly upon hovering over the image. Please help or point me to the correct forum.
×
×
  • Create New...