[Share] Portfolio Page Code (7.1)

19 hours ago, Lpulecio said:

Hi @tuanphan - I tried using the code for #17. Add all projects under Pagination but my subscription plan apparently doesn't include code injection. Could you help me with the css code or some way to add all portfolio projects in a grid under pagination? So people don't have to go back to the homepage every time or be able to only go to the next project.

This is my website: www.laurapulecio.com

Thank you in advance!!

This is not possible with CSS code. You try edit your Site Footer > Add a Markdown Block > Then add the #17 code.

Thank you so much for this! Just used #1 to do exactly what I needed. Follow up: Wondering if each project in the portfolio could overlay a different color in the site palette? How hard would that be? Thanks again!

1 minute ago, imuhwinner said:

Thank you so much for this! Just used #1 to do exactly what I needed. Follow up: Wondering if each project in the portfolio could overlay a different color in the site palette? How hard would that be? Thanks again!

Use some code like this under above code

.grid-item:nth-child(1) .grid-image:after {
    background-color: red !important; /* chage overlay color here */
}
.grid-item:nth-child(2) .grid-image:after {
    background-color: #f1f !important;
}
.grid-item:nth-child(3) .grid-image:after {
    background-color: rgba(0,0,0,0.5) !important;
}
.grid-item:nth-child(4) .grid-image:after {
    background-color: violet !important;
}

Repeat similar

You can use color name (eg: red), hex color (eg: #f1f), rgb (eg: rgb(0,0,0)) or rgba color (eg: rgba(0,0,0,0.5))

This code will apply all portfolio pages, if you use multi pages, you can send link to portfolio page where you want to apply, we can tweak code easier

Woo! Totally worked and exactly what I wanted! Thank you!!

Hi @tuanphan, is it possible to add an additional text line when using Grid: Overlay, please?

I would ideally like to add a colour when hovering over each project within Grid: Overlay too, is this possible?

9 hours ago, DanniR said:

Hi @tuanphan, is it possible to add an additional text line when using Grid: Overlay, please?

I would ideally like to add a colour when hovering over each project within Grid: Overlay too, is this possible?

#1. You can use #2 code. I remember Grid Simple and Grid Overlay have same class/id, so you can use that code

#2. Each project will have a different color?

Hi @tuanphan I used your CSS to add a subtitle to my portfolio/case studies page– which worked great. It currently looks like this: 

I'm curious if there is a way to move the to move both the title and the subtext to display over the image on rollover, with a light screen over the image (which is a .gif, if that matters). Positioned like this:

As a bonus, it would be amazing if the text could animate in from the bottom up on rollover, with the image zoom and a light screen over the bottom ⅓ of the image (to make the white text pop), but that might be asking too much. Thank you so much all the help and support you provide on this forum!

On 1/3/2024 at 11:37 PM, FortWest said:

Hi @tuanphan I used your CSS to add a subtitle to my portfolio/case studies page– which worked great. It currently looks like this: 

I'm curious if there is a way to move the to move both the title and the subtext to display over the image on rollover, with a light screen over the image (which is a .gif, if that matters). Positioned like this:

As a bonus, it would be amazing if the text could animate in from the bottom up on rollover, with the image zoom and a light screen over the bottom ⅓ of the image (to make the white text pop), but that might be asking too much. Thank you so much all the help and support you provide on this forum!

Hi,

It is possible, but require some code, if you share link to your portfolio page, I can test code easier

On 1/5/2024 at 1:04 AM, tuanphan said:

Hi,

It is possible, but require some code, if you share link to your portfolio page, I can test code easier

Thank you @tuanphan!

The portfolio page is located here: https://www.fortwest.com/work

The effect (screen and text reveal) I'm trying to match is on the home page (from screen shot), here: https://www.fortwest.com/

Thank you very much for your help!

On 1/9/2024 at 8:29 AM, FortWest said:

Thank you @tuanphan!

The portfolio page is located here: https://www.fortwest.com/work

The effect (screen and text reveal) I'm trying to match is on the home page (from screen shot), here: https://www.fortwest.com/

Thank you very much for your help!

Use this code to Custom CSS box

.portfolio-text {
    position: absolute !important;
    bottom: 0;
    left: 10px;
    z-index: 999999;
    transform: translateY(65%);
    transition: all 0.3s ease;
}

.portfolio-text * {
    color: white !important;
}

a.grid-item:hover .portfolio-text {
    transform: translateY(0);
    transition: all 0.3s ease;
}

On 1/9/2024 at 11:54 PM, tuanphan said:

Use this code to Custom CSS box

.portfolio-text {
    position: absolute !important;
    bottom: 0;
    left: 10px;
    z-index: 999999;
    transform: translateY(65%);
    transition: all 0.3s ease;
}

.portfolio-text * {
    color: white !important;
}

a.grid-item:hover .portfolio-text {
    transform: translateY(0);
    transition: all 0.3s ease;
}

 

Thank you, @tuanphan! This is amazing!

I implemented this on the site, and it's almost exactly what I'm looking for. 

• I adjusted the font sizes to match what I have on the home page. I think it looks great. 
   
• I adjusted the left and bottom padding to put the title where I want it to be (to match the home page). However, when I did that, it starts to show the description copy. On the home page, the description copy fades in on hover (as the title moves up). Is that possible?
  
   
• When I adjusted the bottom padding (to get the title to match the home page example), on hover the padding on the bottom of the description text is more than I want (see screenshot). Is there a way to separate those?
  
   
• Lastly, is there a way to control the padding on the right side of the description text?
  

Thank you SO much for your help! You are amazing!

On 1/12/2024 at 4:39 AM, FortWest said:

Thank you, @tuanphan! This is amazing!

I implemented this on the site, and it's almost exactly what I'm looking for. 

• I adjusted the font sizes to match what I have on the home page. I think it looks great. 
   
• I adjusted the left and bottom padding to put the title where I want it to be (to match the home page). However, when I did that, it starts to show the description copy. On the home page, the description copy fades in on hover (as the title moves up). Is that possible?
  
   
• When I adjusted the bottom padding (to get the title to match the home page example), on hover the padding on the bottom of the description text is more than I want (see screenshot). Is there a way to separate those?
  
   
• Lastly, is there a way to control the padding on the right side of the description text?
  

Thank you SO much for your help! You are amazing!

 

To make text hidden, adjust 65% in the code

To adjust right padding, use this CSS under

h3.portfolio-title {
    padding-right: 20px !important;
}

Great post, thanks Tuan 🙂

I've managed to adjust the title and subtitle fonts, but my client is keen for a block of colour to feature behind, as well as an underline if possible. Can you help? First image shows how it looks now, second shows how client would like it to look. TIA.

https://oval-mandolin-y344.squarespace.com/projects

PW: Phoebe24

On 3/11/2024 at 10:39 PM, MakingWaves said:

Great post, thanks Tuan 🙂

I've managed to adjust the title and subtitle fonts, but my client is keen for a block of colour to feature behind, as well as an underline if possible. Can you help? First image shows how it looks now, second shows how client would like it to look. TIA.

https://oval-mandolin-y344.squarespace.com/projects

PW: Phoebe24

You can use this CSS code

/* Portfolio - Text over image */
.portfolio-text {
    margin-top: 0 !important;
    top: -50px;
    background-color: white;
    max-width: 700px;
    min-width: 350px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width:767px) {
    .portfolio-text {
        min-width: 150px;
        padding-left: 10px;
        padding-right: 10px;
    }
}