Portfolio Collection

Description

Portfolio pages are exclusive to Squarespace 7.1. Use it to to organize and showcase your projects, galleries, highlights and other content. Each link on your portfolio collection has its own individual portfolio page.

There are 5 different layouts to choose from:

• Grid: Simple

• Grid: Overlay

• Hover: Background

• Hover: Fixed

• Hover: Follow Cursor

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.portfolio-grid-overlay .grid-item {
}

</style>

Custom CSS

Grid: Simple

To target the portfolio display

/* portfolio display */
.portfolio-grid-basic {
}

To target the individual project

/* invdividual project */
.portfolio-grid-basic .grid-item {
}

To target the project title

/* project title */
.portfolio-grid-basic .portfolio-title {
}

To target the project image

/* project image */
.portfolio-grid-basic .grid-item .grid-image {
}

Grid: Overlay

To target the invdividual project

/* invdividual project */
.portfolio-grid-overlay .grid-item {
}

To target the project title

/* project title */
.portfolio-grid-overlay .grid-item .portfolio-title {
}

To target the project image

/* project image */
.portfolio-grid-overlay .grid-item .portfolio-image {
}

To target the project image overlay

/* project image overlay */
.portfolio-grid-overlay .grid-item .portfolio-overlay {
}

Hover Background

To target the portfolio display

/* portfolio display */
.portfolio-hover[data-mode="hover-cover"] {
}

To target the project title list

/* project title list */
.portfolio-hover-items-list * {
}

To target the project image

/* project image */
.portfolio-hover-bg-img {
}

Hover Fixed

To target the project title list

/* project title list */
.portfolio-hover[data-variant-hover-static] .portfolio-hover-item-title {
}

To target the project image

/* project image */
.portfolio-hover-bg-img {
}

Hover: Follow Cursor

To target the project title list

/* project title list */
.portfolio-hover-item-title {
}

To target the project list delimiter

/* project list delimiter */
.portfolio-hover-item:not(:last-child) .portfolio-hover-item-title::after {
}

To target the project image

/* project image */
.portfolio-hover-bg-img {
}