Jump to content

Can I mimic a Portfolio page with a Gallery?

Go to solution Solved by tuanphan,

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 572
  • Created
  • Last Reply

Top Posters In This Topic

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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.

Edited by sshinkle
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Screenshot 2023-06-14 155913.png

 

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

Edited by sshinkle
Link to comment
  • Solution
On 6/15/2023 at 6:00 AM, sshinkle said:

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

Screenshot 2023-06-14 155913.png

 

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

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.