title: SquareSpace Customer CSS Title Hover on Images
body: <p>I am using SquareSpace, and I am trying to add custom CSS to 3 images on my cover page. Currently on hover the images change opacity, and then a blue block appears with the title of the image. I am trying to make the blue block larger, but also make sure the block is trim to the actual image. As you can see in the following image, there is a little overhang:</p>
  
  <p><a href="https://i.stack.imgur.com/To9jS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/To9jS.png" alt="Overhang"></a></p>
  
  <p>Any help would be appreciated! </p>
  
  <pre><code>.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
    display: block;
    position: relative;
    top: -15px;
    text-align: center;
    opacity: 0;
    background-color: #1E75BB;
    margin-bottom: 0px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
  }
  
  .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
    display: block;
    opacity: 50;
    background-color: none;
    text-align: center;
    width: 100%;
  }
  
  .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
    font-family: adelle-sans;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
  }
  
  .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
    font-family: adelle-sans;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
  }
  
  @media only screen and (max-width: 75px) {
    .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
      opacity: 50;
    }
  }
  </code></pre>