Customization of Portfolio Section layout- Changing size of background images and adding title

Site URL: https://erickanigan.photography/portfolio-3#2

Hi-

I'm looking to modify the width/overall size of the background images on one of the portfolio pages I have. When I hover over the text, the images take up the entirety of the screen. Ideally I would like the margins/size of these images to be brought in and made smaller overall. Is there any way to customize the size of these images.

Additionally, I would like to add text above the three "projects" to denote "collections". Is there any way to add custom text that is different from the project titles?

Thank you for the help!

Eric

Try the following code in custom CSS/code block:

.portfolio-hover-bg-img {
	width: 80%;
	height: 80%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

You can reduce the percentage to reduce the size of the images even more. Or you can directly enter size in px. Mind it though, if you're using custom CSS, portfolio hover images across the site will be affected.

If you know a bit of CSS:

And you wish to add "Collections" above the project titles, you can do it by just creating a section above the portfolio and using text box to create the heading. Once you did that, publish the page. Use an extension called Squarespace collection/block identifier to find the id of the block. Use CSS margin property to appropriately align the text above the three project names as you wish.

2 hours ago, aravsanj said:

Try the following code in custom CSS/code block:

.portfolio-hover-bg-img {
	width: 80%;
	height: 80%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

You can reduce the percentage to reduce the size of the images even more. Or you can directly enter size in px. Mind it though, if you're using custom CSS, portfolio hover images across the site will be affected.

If you know a bit of CSS:

And you wish to add "Collections" above the project titles, you can do it by just creating a section above the portfolio and using text box to create the heading. Once you did that, publish the page. Use an extension called Squarespace collection/block identifier to find the id of the block. Use CSS margin property to appropriately align the text above the three project names as you wish.

 

Hi aravsanj-

Thanks for this- it looks to be working. Is there any way to add a margin from the top to space it a bit lower than the current border with the top section of the page?

Eric

@ed0304

Try adding this: 

.portfolio-hover-bg-img {
margin-top:50px;
}

On 6/5/2021 at 3:09 PM, aravsanj said:

@ed0304

Try adding this: 

.portfolio-hover-bg-img {
margin-top:50px;
}

 

Awesome! working now thank you!