Jump to content

Multiple images in portfolio's work linking to the same project

Recommended Posts

I'm in the process of rebuilding my portfolio, but I realised that for the type of work I do I'd like to have a gallery type layout (much like any portfolio), but with several images linking to the same project-page. So that a lot more content is shown in the homepage, but the project-pages are much less than the amount of images in the work page.

I've tried toying around with a gallery, and adding manually the links to single pages, but I don't have the hover of the title in front of the images.

Any help is appreciated 😉 

Link to comment
  • Replies 3
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

On 11/27/2023 at 10:10 PM, crive said:

Hello,
sounds great!

https://daffodil-heron-mj5b.squarespace.com/
pw
test2024

I'm using a gallery as a homepage, linking manually the images to projects that are from a (hidden) portfolio.

If I can do anything else, let me know!

Hover image >> Show overlay only or show overlay + text?

If text, can you enable Gallery Caption + add some text?

If overlay only, add this code to Website Tools (under Not Linked) > Custom CSS

figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"]:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.