Jump to content

Search the Community

Showing results for tags 'opacity'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. Hi everyone, I recently improved my website by adding some code to make the captions only visible below the Lightbox, and therefore invisible on the page layout. It is working, but it's also ugly. The typo doesn't work, it doesn't look nice and for some reasons, the caption box doesn't automaticaly align with the pictures it refers to, resulting in this ugly white box. First is how it is at the moment, and then what I imagine it could look like. I am looking for ways to make the caption automaticaly adjust to the width of the pictures of each page, my pictures are not always 2,4x1. And I would also like to adjust the opacity of the background, which I knew how to do before adding my ligns of code. I'm not sure where to change that given I have this in the CSS : body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 100%; width: 100%; transform: translate(-50%, -50%); font-size: 1em; text-align: center; width: 60%; } .style-gallery-lightbox-text p { width: auto; padding: 10px 15px; margin: auto; color: #000; line-height:2; background-color: #fff; margin-top:-30px; } .gallery-lightbox-item-img { height: 90%; } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 80%; } } .gallery-caption-grid-simple, .gallery-caption-grid-strips, .gallery-caption-grid-masonry { display: none; } I'm really not a code guy but I try my best, hope someone understands and can help me, Merry christmas to anyone celebrating, Best
  2. Hi, does anyone know if it is possible to change the opacity of the image caption? I have added a CSS code that enables the caption to always show on mobile (to avoid the confusing dot that one must click in order to display the caption), but I am finding the caption overlay to be exceptionally dark. I am wondering if there is a way to reduce the opacity of this so that the image underneath the caption shows up better? Thanks for any help!
  3. Hi there, I am trying to figure out how I can adjust the opacity of the gradient behind the header. I would like for it to be more opaque near the top -- so that the menu items and logo have more contrast. So far I have used this to remove some of the top padding (moving logo further up towards more opaque part of gradient) and adding bottom padding -- which helps add more height to the gradient effect, drawing the higher opacity further down the page... If someone might be able to share more specific opacity controls creating the gradient effect that I could adjust/play with that would be amazing -- thank you! This is what I've plugged in so far... /*transparent gradient*/ /* Header height */ .header-announcement-bar-wrapper { padding-top: 1px !important; padding-bottom: 100px !important; }
  4. site: https://www.amethystwallgallery.com/ pass: Help123! In an empty cart, I would like to have the "Continue Shopping" button fade to 0.5 opacity when I hover over it, but I can't for the life of me figure out the right combination of selectors to use to actually target it. Any help would be much appreciated! Bonus points if my hero @tuanphan could weigh in! πŸ˜…
  5. Site URL: https://www.breemelanson.com/the-membership I need help removing the black gradient on the video control panels on this page. Is there a CSS to fix this?
  6. Site URL: https://www.brightfuturesolarenergy.com/our-team So I managed to finally get some CSS to work on a page, however I wanted to make it across the whole section instead of just 1 image so I don't have to have a long line of code for every image I want to be clickable with the hovering. I understand I would need the section code: section[data-section-id="62b23803e4d8ad2547975153"], but that is as far as I got. /* hide image on hover */ div#block-yui_3_17_2_1_1655846291928_113473 a:hover img { opacity: 0.3; } div#block-yui_3_17_2_1_1655846291928_113473 a img { transition: all ease-in-out 0.5s; opacity: 0.9; }
  7. Site URL: https://www.nancyturnersmith.com/ I have three images (below) on this Home page. When I click on them the color behind the image is a bit transparent. I would like it to be solid. I was told by SQSP Customer Service that the opacity of this Lightbox is fixed .I guess it's at '0.9' or something to that effect. I do have this code for the portfolio pages and it works fine. .gallery-lightbox-background { background-color: #fffaef; opacity: 1.0; } Thanks for anyones help. Best Wishes, George
  8. Site URL: https://www.10peaks.ca Since the new fluid engine my buttons - site side - have a hover transition with opacity. I can't figure out how to remove it or what is causing it. See this page on the site https://www.10peaks.ca/breakfastmeetup Does anyone have a suggestion. Thank you in advance.
  9. Site URL: https://www.kindred.work/servicesv2 Hi πŸ™‚ , I've created 3 custom modals to pop up on a button click by adding a .active class to the modal container. The CSS I've used to achieve this is as follows: #coach-wrapper { left: 100vw; opacity: 0; transition: all 0.3s ease-in-out; } #coach-wrapper.active{ opacity: 100%; display: flex; position: relative; z-index: 1000; left: 0; } I expected the modal to slide in from the left however it currently just immediately appears on the page with no transition. Any advice on how to achieve such a transition would be greatly appreciated!
  10. Site URL: http://pumpspotting.com/pumpspotting-for-restaurant-employers please help me understand why this page is greyed out but the parent page found here is not.
  11. 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?
  12. 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.
  13. 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
  14. 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?
  15. 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; }
  16. 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
  17. 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.
  18. 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.
  19. 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!
  20. 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!
  21. 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
  22. 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.
  23. 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!
  24. 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
  25. 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
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.