Jump to content

gppp96

Member
  • Posts

    17
  • Joined

  • Last visited

Posts posted by gppp96

  1. I have the same issue.

    Here the page

    https://apricots-tunny-yy4c.squarespace.com/works

    password Hiro96

     

    Here is the current code :

     

    body#collection-6279314ca417ed4a39ac61a0 {
    figure.gallery-masonry-item {
        position: relative;
    }
    .gallery-caption {
        position: static;
    }
    /* title */
    figcaption.gallery-caption .gallery-caption-wrapper 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;
    }
    .gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
        opacity: 1 !important;
    }
    /* overlay */
    .gallery-masonry-item-wrapper:after {
        background: rgba(255,255,255,0.6); /* overlay color */
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity ease 200ms !important;
        z-index: 9999;
    }
    .gallery-masonry-item:hover .gallery-item-wrapper:after {
        opacity: 0.75;
    }
    /* remove gap */
    figcaption {
        padding: 0 !important;
    }
    figure:hover .gallery-masonry-item-wrapper:after {
        opacity: 1;
    }}
    body#collection-6279314ca417ed4a39ac61a0 {
    figure p.gallery-caption-content:after {
        display: block;
        position: absolute;
        top: calc(~"50% + 10px");
    }
    figure:nth-child(1) p.gallery-caption-content:after {
        content: "Hiro | 2022";
    }
    figure:nth-child(2) p.gallery-caption-content:after {
        content: "Hiro | 2021";
    }
    figure:nth-child(3) p.gallery-caption-content:after {
        content: "Cyrcus | 2020";
    }}
    body#collection-6279314ca417ed4a39ac61a0 {
    figure p.gallery-caption-content:after {
        display: block;
        position: absolute;
        top: calc(~"50% + 10px");
    }
    figure:nth-child(4) p.gallery-caption-content:after {
        content: "Hiro | 2021";
    }
    figure:nth-child(5) p.gallery-caption-content:after {
        content: "Prototype | 2020";
    }}

     

     

    Thanks a lot!

  2. Ive tried to put a normal photo gallery istead of the plugin. I like the result of it. I also manage to link the image to its personal description in another page. The Problem is that I can  t put text subtitles overlay like in the portfolio page. Do you have any idea?

     
     
    add text and foto overlay opacity like in my portfolio page. I will delete then the portfolio page. This is my portfolio page----  https://apricots-tunny-yy4c.squarespace.com/works-1
     
     
    Thanks a lot
  3. Site URL: https://apricots-tunny-yy4c.squarespace.com/config/pages

    I'm trying to create a new grid from a portfolio template. I would like to change its aspect ratio for each project (for example 4: 3 size or 2: 3 vertical size). This is not possible for me with the basic template. Is there a code to do all this?. if so, where should I enter it?. I'm attaching a photo of how I would like it to come. Also I was wondering how to add a subtitle to the overlay caption for each project (project name and client name). Thanks in advance.

     

    https://apricots-tunny-yy4c.squarespace.com/config/pages

    layout1.jpg

×
×
  • 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.