changing font size/style on Portfolio image hover + direction

Site URL: https://cylinder-porcupine-rlr9.squarespace.com/portfolio

Password: gabby

Hi there,

I want to make the font size smaller on the image titles on hover state on the main PORTFOLIO page (and maybe change the font style, too, but at least the size). Also: once you're browsing projects, the font size on the directional text at the bottom of the page is HUGE. Want to make that smaller, but not seeing a way. Thanks in advance for your help!

Add to Home > Design > Custom CSS

/* Portfolio title */
h3.portfolio-title {
    font-size: 15px !important;
}
/* Pagination */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 1.2em;
}

Hi tuanphan, the above code has been very helpful for a similar solution I was looking for. Would it be possible to see code for changing the font on the hover state as well?

Thanks for your help!

On 8/30/2021 at 6:35 PM, ToddSA said:

Hi tuanphan, the above code has been very helpful for a similar solution I was looking for. Would it be possible to see code for changing the font on the hover state as well?

Thanks for your help!

use this

h3.portfolio-title {
    font-size: 15px !important;
	font-family: monospace !important;
}

@tuanphan your code (on various posts) has been really helpful, so thank you! How would I change the font used for the portfolio cover text? I've got the sizes pretty much set, but I'd like to use my own font families (for portfolio title and the h3 below each title) so that they align with the rest of the site.

https://www.bon-creative.co.uk/work

17 hours ago, EllMorrow said:

@tuanphan your code (on various posts) has been really helpful, so thank you! How would I change the font used for the portfolio cover text? I've got the sizes pretty much set, but I'd like to use my own font families (for portfolio title and the h3 below each title) so that they align with the rest of the site.

https://www.bon-creative.co.uk/work

Use this CSS

h3.portfolio-title, h3.portfolio-title:after {
    font-family: 'Fontspring-DEMO-visbycf-extrabold' !important;
}

On 12/4/2022 at 1:19 AM, tuanphan said:

Use this CSS

h3.portfolio-title, h3.portfolio-title:after {
    font-family: 'Fontspring-DEMO-visbycf-extrabold' !important;
}

 

Thanks so much @tuanphan! Two more things if you'd be able to help

1. How do I add a darker/different coloured background to the photos on hover? And change the text colour if required? I love how this portfolio page looks, for example: https://www.sandrarsobral.com/

2. Can I make a portfolio item link to another page? We have two portfolios on our site (social media work and event photography) and we think most people will go to 'Work' rather than 'Photography'. We'd like to link to the Photography page within the Work page portfolio items.

You can see that we've created a portfolio item called Event Photography on this page: https://www.bon-creative.co.uk/work. I just can't figure out how to make that link to a different page rather than go through to the item - is it possible? 

Thanks in advance 🙂

Hello

This code is really useful, could you please add some code to place the text on two lines  and align left bottom?

17 hours ago, EllMorrow said:

Thanks so much @tuanphan! Two more things if you'd be able to help

1. How do I add a darker/different coloured background to the photos on hover? And change the text colour if required? I love how this portfolio page looks, for example: https://www.sandrarsobral.com/

2. Can I make a portfolio item link to another page? We have two portfolios on our site (social media work and event photography) and we think most people will go to 'Work' rather than 'Photography'. We'd like to link to the Photography page within the Work page portfolio items.

You can see that we've created a portfolio item called Event Photography on this page: https://www.bon-creative.co.uk/work. I just can't figure out how to make that link to a different page rather than go through to the item - is it possible? 

Thanks in advance 🙂

#1. Add this CSS

.grid-item:hover .portfolio-overlay {
    background-color: rgba(0,0,0,0.9) !important;
    opacity: 1 !important;
}
h3.portfolio-title, h3.portfolio-title:after {
    color: white !important;
}

#2. You mean change Event Photography link to custom link?

#3. 

16 hours ago, Emmapartridge said:

Hello

This code is really useful, could you please add some code to place the text on two lines  and align left bottom?

 

Move this text down like this?

On 12/20/2022 at 9:54 AM, tuanphan said:

#2. You mean change Event Photography link to custom link?

Yes 🙂 is that possible?

On 12/29/2022 at 6:13 AM, EllMorrow said:

 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('a.grid-item[href="/work/event-photography"]').attr('href','https://google.com');
});
</script>

Replace google with new url

Hi,

I'd like to be able to center and also change text font and sizes of these portfolio titles. Any ideas?

Thanks in advance!

On 4/12/2023 at 2:47 AM, mfrangan said:

Hi,

 

I'd like to be able to center and also change text font and sizes of these portfolio titles. Any ideas?

Thanks in advance!

Can you share link to portfolio page?

On 8/15/2020 at 1:11 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* Portfolio title */
h3.portfolio-title {
    font-size: 15px !important;
}
/* Pagination */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 1.2em;
}

 

Can the code be modified for type size to be adjusted on mobile only?

13 hours ago, Drewnesse said:

Can the code be modified for type size to be adjusted on mobile only?

Use this code

@media screen and (max-width:767px) {
/* Portfolio title */
h3.portfolio-title {
    font-size: 15px !important;
}
/* Pagination */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 1.2em;
}
}