Jump to content

Portfolio grid titles

Recommended Posts

Site URL: https://www.artonthegrid.com/stories

Hi, I'm looking to rebuild the page below as a portfolio page with a simple grid. Right now it's built as a page with inline poster images to allow for a text caption below and text on hover with css. I've been playing with css to allow the text to show up below and on the hover on a portfolio page, but am having no luck (second screenshot). It would ideal to have this page built as a portfolio so it's easier to update.

Any help would be much appreciated!

Screen Shot 2021-11-12 at 10.16.10 AM.png

Screen Shot 2021-11-12 at 10.15.53 AM.png

Edited by loren1
Link to comment
On 11/12/2021 at 10:17 PM, loren1 said:

Site URL: https://www.artonthegrid.com/stories

Hi, I'm looking to rebuild the page below as a portfolio page with a simple grid. Right now it's built as a page with inline poster images to allow for a text caption below and text on hover with css. I've been playing with css to allow the text to show up below and on the hover on a portfolio page, but am having no luck (second screenshot). It would ideal to have this page built as a portfolio so it's easier to update.

Any help would be much appreciated!

Screen Shot 2021-11-12 at 10.16.10 AM.png

Screen Shot 2021-11-12 at 10.15.53 AM.png

I 've checked that the hover effect has worked properly on your site

Do you still need any help?

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 hours ago, bangank36 said:

I 've checked that the hover effect has worked properly on your site

Do you still need any help?

 

 

Hi, yes, thanks for checking! I'm looking to replicate what is currently up now (with the caption and text on image hover) to a portfolio page. Is there a way to do this? Right now you either get text below the image or on hover, but not both. I've tried out a bunch of css but can't seem to figure it out.

Here is the link to the working page I described:

https://www.artonthegrid.com/stories-2

Edited by loren1
Link to comment
1 hour ago, loren1 said:

Hi, yes, thanks for checking! I'm looking to replicate what is currently up now (with the caption and text on image hover) to a portfolio page. Is there a way to do this? Right now you either get text below the image or on hover, but not both. I've tried out a bunch of css but can't seem to figure it out.

Can you share the link to this portfolio page to check your issue?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
13 hours ago, loren1 said:

https://www.artonthegrid.com/stories-2

Thank you again for looking into this!

Add to Design > Custom CSS

/* Portfolio hover */
.portfolio-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    z-index: 10000;
    opacity: 0;
}

a.grid-item {
    position: relative;
}
.grid-item:hover .portfolio-text {
    opacity: 1;
}
.grid-image-inner-wrapper:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
}
.portfolio-text * {
    color: white !important;
}
.grid-item:hover .grid-image-inner-wrapper:after {
    opacity: 1;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/15/2021 at 9:11 PM, loren1 said:

Thank you so much for the css @tuanphan! This solves part of the problem, is there a way to add a caption below each portfolio image in addition to keeping the text hover?

You mean make text under image, or make text over image on hover?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi, working with Loren on the same site. One solution might be to forget about using portfolio pages and replicate the behavior by adding two code blocks to each page in the Stories area: one with the artist name and another with a sort order number (1, 2, 3, etc.) Then create a javascript that uses those variables to create a nav bar above the page footer that behaves the same way as a Portfolio nav. The code blocks would tell the script which artist names to show in the nav and in which order. When adding a new page, we would include the proper sorting number and also add the new artist name. I did some searching (unfortunately I am not a java programmer) and found a number of scripts that address secondary nav bars but nothing close to what we are trying to do. Any direction towards the right resource would be greatly appreciated.

Link to comment
On 11/18/2021 at 9:58 AM, loren1 said:

Both! Is this possible? Thanks @tuanphan

Initial: Text under image

Hover: Hide text under image + Make text over image

Is this right?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@tuanphanText under image would remain and would like the text on hover as well. Right now I can only get one or the other, not both. Thanks again for looking into this! @rdimarco

Here is the working portfolio page:

https://www.artonthegrid.com/stories-2

This is what I'm trying to achieve, but on a portfolio page:

https://www.artonthegrid.com/stories

Edited by loren1
Link to comment
On 11/20/2021 at 7:29 PM, loren1 said:

@tuanphanText under image would remain and would like the text on hover as well. Right now I can only get one or the other, not both. Thanks again for looking into this! @rdimarco

Here is the working portfolio page:

https://www.artonthegrid.com/stories-2

This is what I'm trying to achieve, but on a portfolio page:

https://www.artonthegrid.com/stories

There is no automatic way to do this. You will need to use code manually for each projects. Add this to Design > Custom CSS

/* Stories portfolio page */
body#collection-618c573df5f4675a880adfb8 {
a.grid-item:after {
    display: block;
    position: absolute;
    bottom: -30px;
    width: 100%;
}
a.grid-item[href="/stories-2/ralph-dimarco"]:after {
    content: "enter text 1";
}
a.grid-item[href="/stories-2/jesse-tobin-mccauley"]:after {
    content: "enter text 2";
}
a.grid-item[href="/stories-2/loren-depalma"]:after {
    content: "enter text 3";
}
a.grid-item[href="/stories-2/bruce-horan"]:after {
    content: "enter text 4";
}
}

image.png

Edited by tuanphan

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.