title: Text on Hover Image padding
body: <p>I successfully added css code to our squarespace site to make gallery images have the title of each image appear on hover. The problem is that the title leaves extra white space (about 15px) bellow each image. I want each image to be touching each other on top and bottom the same way they do on the sides.</p>
  
  <p>My code is bellow, here is the link to the page: <a href="https://baikart.com/artists2" rel="nofollow noreferrer">https://baikart.com/artists2</a></p>
  
  <p>I've tried using padding code but that pushes the image around and I just want the white space gone.</p>
  
  <pre><code>.summary-content {
      position: absolute;
      color:#fff;
      top: 50%;
      left: 50%;
      opacity: 0;
      transition: all .5s ease;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
  }
  
  #Main-content {
      .summary-content {
          position: absolute;
          color:#fff;
          top: 50%;
          left: 50%;
          opacity: 0;
          transition: all .5s ease;
          transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
          -moz-transform: translate(-50%,-50%);
      }
  }
  
  .summary-item:hover {
      img {
          -webkit-filter: brightness(50%);
          filter: brightness(50%);
          transition: all .5s ease;
      }
  
      .summary-content{
          opacity: 1;
      }
  }
  </code></pre>