Jump to content

Civic

Circle Member
  • Posts

    17
  • Joined

  • Last visited

Posts posted by Civic

  1. 2 hours ago, Web_Solutions said:

    Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

    .gallery-caption.gallery-caption-grid-masonry {
        width: auto !important;
        height: auto !important;
        bottom: 10px !important;
        left: 20px !important;
        transform: none !important;
        top: auto !important;
    }

     

    Screenshot_457.png

    Works perfect thanks ūüôā

  2. Hello @tuanphan I just solved.

    Here my custom code:

     

    /////Grid Porfolio/////
    .gallery-caption-grid-masonry {
      opacity: 0;
      z-index: -1;
      transition: all .2s;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      text-align: center;
    height: 100%;
    padding: 0;
    transition: all 0.3s ease-in-out !important;
    }


    .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
      background-color: rgba(0, 0, 0, 0.4);
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      opacity: 0;
    transition: all 0.3s ease-in-out !important;
    }

    .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
      z-index: 0;
      opacity: 1;
      height: auto;
      transition: all 0.3s ease-in-out !important;
    }

    .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
      z-index: 0;
      opacity: 1;
      transition: all 0.3s ease-in-out !important;
    }


    .gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
      opacity: 1;
      transition: all 0.3s ease-in-out !important;
    }

    .gallery-caption-grid-masonry .gallery-caption-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease-in-out !important;
      
    }

    .gallery-caption-grid-masonry p.gallery-caption-content {
      z-index: 1000;
      font-size: 1.5rem;
      font-family:'ProximaNova-Light.otf';
      color:#000;
      transition: all 0.3s ease-in-out !important;

    }

    /* overlay */
    .gallery-masonry-item-wrapper a:after {
        background: rgba(255,255,255,1);
      transition: all 0.3s ease-in-out !important;/* overlay color */
        content: "";
        display: block;
        position: absolute;
        height: 10%; /* overlay height */
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    transition: all 0.3s ease-in-out !important;
      height:100%;

    }
    .gallery-masonry-item-wrapper{
    border-radius:5px;
    }
    .gallery-masonry-item-wrapper a{
    transform:scale(1);
    transition: all 1s ease-in-out;
    &:hover{
    transform:scale(1.03);
    transition: all 1s ease-in-out;
    }
    }

    .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
        opacity: 0.75;
    transition: all 0.3s ease-in-out !important;
    }

    .gallery-caption-grid-masonry .gallery-caption-content{
     transition: all 1s ease-in-out !important; 
    }
    /////Grid Porfolio/////

     

     

    https://faas-dev.squarespace.com/sample

    pass:helloworld

√ó
√ó
  • 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.