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

Black Gradient shows white in portfolio grid overlay.

Question

Site URL: https://shark-clementine-5jph.squarespace.com/portfolio

.portfolio-overlay {
      background: linear-gradient(to bottom, #ffffff00 50%, #000000)}

I'm trying to have a black gradient that fades to transparent on the portfolio grid overlay. But the existing overlay prevents #FFFFFF00 from being transparent (it's just showing as white (#FFFFFF).

Any help is greatly appreciated. And please let me know if I can provide any other info. I'll be sure to get back right away. 

Site password is: mz

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0
Posted (edited)
2 hours ago, rwp said:

.portfolio-overlay {
    background: linear-gradient(to bottom, #fff0 0 50%, #000) !important;
}

 

So this appears to be working when I am editing the portfolio section (in site). However as soon as I save out of it, it reverts back to white. 

I fixed it! It was having a problem with the #fff0 so I switched it to rgba. 

.portfolio-overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, black) !important;
}

 

Edited by Marzon
I fixed it

Share this post


Link to post
  • 1
.portfolio-overlay {
    background: linear-gradient(to bottom, #fff0 0 50%, #000) !important;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...