Can I mimic a Portfolio page with a Gallery?

Hi there - I'm essentially trying to mimic a portfolio page with a gallery regarding the overlay/text hover function but I can't figure out how to do that nicely. I have the main portfolio page laid out but I also need specific project category pages but I don't want to create another portfolio because I need them to be able to link to the same project page (I don't want two pages for the exact same project).

TLDR; I want to recreate this page: 
https://www.tuckersadler.com/projects/civic
 

to have this style (with the text/color overlay on the hover):
https://www.tuckersadler.com/squarespaceprojectstest
pw: tuckersquarespace

but to create it as either a gallery or just image blocks since we aren't able to nest portfolios and I don't want duplicate project pages with different urls. 

I hope that wasn't too muddled. Any help would be so appreciated!

1 hour ago, sshinkle said:

Hi there - I'm essentially trying to mimic a portfolio page with a gallery regarding the overlay/text hover function but I can't figure out how to do that nicely. I have the main portfolio page laid out but I also need specific project category pages but I don't want to create another portfolio because I need them to be able to link to the same project page (I don't want two pages for the exact same project).

TLDR; I want to recreate this page: 
https://www.tuckersadler.com/projects/civic
 

to have this style (with the text/color overlay on the hover):
https://www.tuckersadler.com/squarespaceprojectstest
pw: tuckersquarespace

but to create it as either a gallery or just image blocks since we aren't able to nest portfolios and I don't want duplicate project pages with different urls. 

I hope that wasn't too muddled. Any help would be so appreciated!

So you want the /civic page to have the hover effect with the /squarespaceprojectstest right?

17 minutes ago, Beyondspace said:

So you want the /civic page to have the hover effect with the /squarespaceprojectstest right?

That is correct.

I want them to keep the style consistent because it's basically going to be a top level "All Projects" page and what is essentially a "filtered" Project Category page, but also top level. An individual project will appear on All Projects and on the Civic Projects page but I only want a single webpage for that project. But doing two portfolios (in order to achieve the same design style) forces me into having two webpages for the same project and I don't see how to get it to have that exact style without it being a portfolio.

On 6/13/2023 at 8:00 AM, sshinkle said:

That is correct.

I want them to keep the style consistent because it's basically going to be a top level "All Projects" page and what is essentially a "filtered" Project Category page, but also top level. An individual project will appear on All Projects and on the Civic Projects page but I only want a single webpage for that project. But doing two portfolios (in order to achieve the same design style) forces me into having two webpages for the same project and I don't see how to get it to have that exact style without it being a portfolio.

Can you drag Button Blocks to make its size = Image Size, then we can give code to achieve hover easier

13 hours ago, tuanphan said:

Can you drag Button Blocks to make its size = Image Size, then we can give code to achieve hover easier

Do you mean like this so that the button covers the entire image?

I put up a new test version of that page in case you need it. These aren't created using a gallery - they're just normal image blocks so everything was created manually. Not sure if that makes a difference.  Obviously the gallery would be easier for adding new projects as we go so everything doesn't have to be so manual, but I assume that might also make it fussy when it comes down responsive design and laying regular buttons over top of images in a gallery block.

https://www.tuckersadler.com/projects/civic-squarespacetest

pw: tuckersquarespace

On 6/19/2023 at 10:25 PM, tuanphan said:

Yes. Try adding this to Design > Custom CSS (this code for first item)

/* hide button */
.fe-block-1f76a031e45292b28925 {
    opacity: 0;
    transition: all 0.3s;
}
.fe-block-1f76a031e45292b28925:hover {
    opacity: 1;
     transition: all 0.3s;
}

 

Is there a way I can do this without adding it to the whole site? I need normal buttons in some places and it looks like this is going to apply it to the whole site. I tried adding it to the header code for that specific page but nothing happened.

On 6/23/2023 at 6:57 AM, sshinkle said:

Is there a way I can do this without adding it to the whole site? I need normal buttons in some places and it looks like this is going to apply it to the whole site. I tried adding it to the header code for that specific page but nothing happened.

Add to Custom CSS, not Header Code

Also this code apply 1 item only, it won't apply whole site

On 6/24/2023 at 9:03 PM, tuanphan said:

Add to Custom CSS, not Header Code

Also this code apply 1 item only, it won't apply whole site

Oh I get it - that's the specific block it's addressing. Thank you so much!