Portfolio grid titles

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!

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!

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

Do you still need any help?

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

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?

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

Thank you again for looking into this!

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

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?

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?

Both! Is this possible? Thanks @tuanphan

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.

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?

@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

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

That works @tuanphan! THANK YOU so much, you are amazing.

Hello,

could you suggest how to move the titles to this position: 

This is the website: https://www.wolk.studio/professional

Thank you in advance.

On 1/17/2024 at 6:25 AM, ggimishev said:

Hello,

could you suggest how to move the titles to this position: 

This is the website: https://www.wolk.studio/professional

Thank you in advance.

Password?

@tuanphan 30081994

On 1/22/2024 at 3:49 PM, ggimishev said:

@tuanphan 30081994

I see you figured it out? It already center

On 1/25/2024 at 9:32 AM, tuanphan said:

I see you figured it out? It already center

Yes, but not on the mobile version.

Use this CSS code for mobile

@media screen and (max-width:991px) {
.portfolio-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%);
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
}