Portfolio Listing Page
COMPONENT SELECTOR GUIDE
Grid: Overlay
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .portfolio-grid-overlay | The container of the grid overlay items in the the "Grid: Overlay" portfolio layout, which is styled using the CSS grid display property. |
|
| .portfolio-grid-overlay .grid-item | The children items of the grid container referenced above. |
|
| .grid-image-inner-wrapper | The container for the portfolio item image. |
|
| .grid-image-inner-wrapper img | The portfolio item image. |
|
| .portfolio-overlay | The image overlay. |
|
| .portfolio-text | The continer for the portfolio title. |
|
| .portfolio-title | The portfolio title text. |
|
HTML Structure Explanation
Below is a screenshot showing the overlay grid container of the portfolio items in the "Grid: Overlay" portfolio layout which has a class name of “portfolio-grid-overlay” and it’s descendant elements, including the image, the title, and the image overlay.
The portfolio grid container of the portfolio items which has a class name of “portfolio-grid-overlay” and it’s descendant elements, including the image, the title, and the image overlay.
Grid: Simple
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .portfolio-grid-basic | The container of the grid overlay items for the "Grid: Basic" portfolio layout, which is styled using the CSS grid display property. |
|
| .portfolio-grid-basic .grid-item | The children items of the grid container referenced above. |
|
| .grid-image-inner-wrapper | The container for the portfolio item image. |
|
| .grid-image-inner-wrapper img | The portfolio item image. |
|
| .portfolio-text | The container for the portfolio title. |
|
| .portfolio-title | The portfolio title text. |
|
HTML Structure Explanation
Below is a screenshot showing the basic grid container of the portfolio items in the "Grid: Basic" portfolio layout which has a class name of “portfolio-grid-basic”, and it’s descendant elements, including the image, and the title.
The basic grid container of the portfolio items which has a class name of “portfolio-grid-basic” and it’s descendant elements, including the image, and the title.
Hover: Follow Cursor, Hover: Fixed and Hover: Background
Hover: Follow Cursor
Hover: Fixed
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .portfolio-hover-items | The outer container for the portfolio items in all of the "Hover" layouts. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
| .portfolio-hover-items-list | The parent container for the portfolio items in all of the "Hover" layout. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
| .portfolio-hover-item | The children items of the container referenced above. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
| .portfolio-hover-item-title | The portfolio item title text. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
| .portfolio-hover-item-content | The span element inside of the title text element above. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
| .portfolio-hover-item-title:after | The hyphen that comes after the portfolio item titles in the "Hover: Fixed" layout. |
Hover: Fixed
|
| .portfolio-hover-backgrounds | The outer container for the images that appear on hover. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
| .portfolio-hover-bg-overlay | The overlay for the images that appears on hover. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
| .portfolio-hover-bg-img img | The image that appears on hover. |
Hover: Fixed
Hover: Follow Cursor
Hover: Background
|
HTML Structure Explanation
Below is a screenshot showing the portfolio items which has a class name of “portfolio-hover-items-list” and it’s descendant elements, including the image, and the title.
The “Hover: Follow Cursor” container of the portfolio items which has a class name of “portfolio-hover-items-list” and it’s descendant elements, including the image, and the title.
Below is a screenshot showing the image containers which have a class name of “.portfolio-hover-bg-image” and it’s descendant image element.
