Jump to content

carin

Member
  • Posts

    1
  • Joined

  • Last visited

Posts posted by carin

  1. Hello @tuanphan, I would like to use 

    On 8/17/2020 at 10:21 AM, tuanphan said:

    Add to Page Settings > Advanced > Header

    <style>
    figure.gallery-masonry-item {
        position: relative;
    }
    .gallery-caption {
        position: static;
    }
    /* title */
    .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-content {
        opacity: 1 !important;
    }
    /* overlay */
    .gallery-masonry-item-wrapper a: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;
    }
    .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
        opacity: 0.75;
    }
    /* remove gap */
    figcaption {
        padding: 0 !important;
    }
    </style>

     

    Hello @tuanphan, I would like to use this code but on the "slideshow: reel" gallery type instead. Would you happen to be able to provide a version of the code that would work for this? :)

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