Jump to content

Avery-Stock

Member
  • Posts

    6
  • Joined

  • Last visited

Posts posted by Avery-Stock

  1. I changed the word 'masonry' to grid in the CSS below but it did not work. 

    .gallery-caption {
        position: static;
    }
    /* title */
    .gallery-caption-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        transition: opacity ease 200ms !important;
        opacity: 0 !important;
        pointer-events: none;
        height: 10% !important;
    }
    .gallery-masonry-item:hover .gallery-caption-content { 
    p.gallery-caption-content {
        font-family: LTC-Bodoni-160 
          !important;
    }

     

  2. Site URL: https://www.averyyoungphotography.com

    I am currently using the following code and it is working on some of my images but not on the new ones I just posted on my page. I just need help figuring out why this code is not working for those images and how to fix it. 

    Thanks!

    figure.gallery-masonry-item {
        position: relative;
    }
    .gallery-caption {
        position: static;
    }
    /* title */
    .gallery-caption-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        transition: opacity ease 200ms !important;
        opacity: 0 !important;
        pointer-events: none;
        height: 10% !important;
    }
    .gallery-masonry-item:hover .gallery-caption-content {
        opacity: 1 !important;
    }
    /* overlay */
    .gallery-masonry-item-wrapper a:after {
        background: rgba(0,0,0,1); /* overlay color */
        content: "";
        display: block;
        position: absolute;
        height: 10%; /* overlay height */
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity ease 200ms !important;
    }
    .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
        opacity: 0.75;
    }
    .gallery-masonry-item * {
        color: white;
    }
    /* remove gap */
    figcaption {
        padding: 0 !important;
    }
    /* remove gap */
    figcaption {
        padding: 0 !important;
    }
    p.gallery-caption-content {
        font-family: LTC-Bodoni-160 
          !important;
    }

     

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