Possible to add another line of text in the Portfolio Grid Overlay?

Site URL: http://caper-ukulele-8an9.squarespace.com

Is it possible to add another line of copy when you hover over a thumbnail? I'd like the first line to be the name of the client and the second line to be the project name. Ideally it would be another font as well. Attaching image of what I would like it to look like. 

Thanks for the help!

Yes. Possible. What is password?

awesome, thanks @tuanphan

password: hello

On 1/2/2022 at 3:41 AM, millersota said:

awesome, thanks @tuanphan

password: hello

Add to Design > Custom CSS

/* Home portfolio subtext */
body.homepage {
a.grid-item h3:before {
    display: block;
    font-size: 20px;
}
a.grid-item[href="/work/desolation-2"] h3:before {
    content: "Audi";
}
a.grid-item[href="/work/desolation-2-6ydr3"] h3:before {
    content: "duel";
}
a.grid-item[href="/work/desolation-2-nhjk8"] h3:before {
    content: "Reebok";
}
}

Do similar for other items

@tuanphan thank you, works perfectly!

If I wanted to make the top line a thinner font (Alternate Gothic Condensed ATF) is that a simple enough change?

On 1/5/2022 at 9:48 AM, millersota said:

@tuanphan thank you, works perfectly!

If I wanted to make the top line a thinner font (Alternate Gothic Condensed ATF) is that a simple enough change?

Possible. This is custom font or Squarespace font?

@tuanphan  yes, Alternate Gothic Condensed ATF is a Squarespace font.

One other thing I've noticed or am curious about. The URL slugs I can't custom name them to match the project name without undoing the code you sent, is that adjustable? For instance on this project I'd love for the URL to be /work/duel

Thanks again!

14 hours ago, millersota said:

@tuanphan  yes, Alternate Gothic Condensed ATF is a Squarespace font.

One other thing I've noticed or am curious about. The URL slugs I can't custom name them to match the project name without undoing the code you sent, is that adjustable? For instance on this project I'd love for the URL to be /work/duel

Thanks again!

Change url slug, then update above code. If you can't update, just change url slug then let me know, I will give new code.

Can you share link to a page where you use this font: Alternate Gothic Condensed ATF

(Just want to check font name code, I don't remember exact font name code of this font)

@tuanphan I updated the URL Slug for the first 2 projects. Looks like I'll need new code. Wasn't sure if you wanted me to do all of them yet.

For the font, the only place I'll be using Alternate Gothic Condensed ATF is on the portfolio grid on the top line. I circled here as an example.

Use this code

/* Home portfolio subtext */
body.homepage {
a.grid-item h3:before {
    display: block;
    font-size: 20px;
	font-family: alternate-gothic-condensed-atf;
}
a.grid-item[href="/work/desolation"] h3:before {
    content: "Audi";
}
a.grid-item[href="/work/duel"] h3:before {
    content: "duel";
}
}

You can add a new page (you can delete it later), set font on that page, then share url, I can check font name.

@tuanphanfor some reason that font wasn't actually loading as the correct font. Not sure why it doesn't register as it does when I try it in the design mode, looks different here. I can live without it. 

URL slugs look great for those first two, how do I apply that to the rest of them?

Thanks!

On 1/18/2022 at 5:42 AM, millersota said:

@tuanphanfor some reason that font wasn't actually loading as the correct font. Not sure why it doesn't register as it does when I try it in the design mode, looks different here. I can live without it. 

URL slugs look great for those first two, how do I apply that to the rest of them?

Thanks!

In the code, you will see this line, it is url slug, you can repeat the code, with coressponding url slug. You can try. if you still can't solve, let me know, we will give all code

/work/desolation