Css 悬停图像填充上的文本

我成功地将css代码添加到我们的squarespace站点，使画廊图像的标题显示在悬停状态。问题是标题在每张图片下方留下了额外的空白（约15px）。我希望每个图像在顶部和底部彼此接触，就像它们在侧面一样

我的代码如下，以下是该页面的链接：

我尝试过使用填充代码，但这会使图像四处移动，我只想去掉空白

.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;
    }
}

.container{
位置：相对位置；
宽度：50%；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：rgba（0,0,0,0.8）；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

JS-Bin
淡入叠加
将鼠标悬停在图像上以查看效果

你好，世界

通过CSS编辑器插入的以下CSS将消除图像之间的间隙：

#collection-5d1bb9f4d43d220001cae017 .summary-thumbnail-container.sqs-gallery-image-container {
  margin-bottom: 0;
}

---

CSS通过使用其集合ID专门针对“Artisters 2”集合，该集合ID是在

body

元素上设置的

ID

属性。这样，如果您创建了一个不同的集合，并且希望采用不同的格式，它将不受CSS的影响。如果要全局应用样式，请删除开头的

#collection-..

ID选择器，并通过类将其作为目标。这还意味着，如果您想针对不同的集合（但不全局应用样式），则需要更新上面选择器中的集合ID。

这些图像中的每个链接的底部边距为15px，通过选择器

.sqs-block-summary-v2分配。摘要块设置显示标题。摘要缩略图容器