Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Leanie

Member
  • Posts

    10
  • Joined

  • Last visited

Posts posted by Leanie

  1. Hi @tuanphan

    Below is the code I am currently using. The descriptions now appear on each gallery item in the correct font and position. How do I now create a hover effect?

    body {
      width: 100%;
    }
    section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
      position: relative;
    }
    .gallery-item-description {
      font-family: granville, serif;
      font-size: 30px;
      color: black;
      text-align: center;
    }
    .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
      .gallery-item-description {
        position: absolute;
           top: 50%;
        width: 100%;
        bottom: 0;
    padding: 0% 0%; 
        box-sizing: border-box;
    
      }

     

    Screenshot 2020-02-25 at 10.11.57.png

  2. @tuanphan This code (as per your link):

     

    body {
      width: 100%;
    }
    section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
      position: relative;
    }
    .gallery-item-description {
      font-family: "Roboto", sans-serif;
      font-size: 16px;
      color: black;
    }
    .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
      .gallery-item-description {
        position: absolute;
        width: 100%;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 2% 6%;
        box-sizing: border-box;
      }
    }
    .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
      .gallery-item-description {
        padding: 10px 25px;
        opacity: 1;
        transition: opacity 0.2s;
      }
      .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
        .gallery-item-description {
          opacity: 0;
        }
      }
    }
    .gallery-slideshow {
      .gallery-slideshow-list {
        min-height: 60vh;
      }
      .gallery-slideshow-item-wrapper, .gallery-item-description {
        flex: 1 1 auto;
      }
    }
    .gallery-reel {
      .gallery-item-description {
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
      }
      &[data-width="inset"], &[data-width="inset"] {
        .gallery-item-description {
          max-width: 88vw;
        }
      }
      &[data-width="full-bleed"] {
        .gallery-item-description {
          max-width: 100vw;
        }
      }
    }
    .gallery-lightbox .gallery-item-description {
      margin-top: 1em;
      padding: 1em 2em;
      background-color: rgba(225, 225, 225, 1);
    }

     

  3. Hi, 

    I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css.

    (I want to use a masonry gallery as my landing page that clicks through to each project).

    Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares.

×
×
  • Create New...