html - 使图像标题在悬停时覆盖整个图像

Question

目前我在 Squarespace 中使用 css 来尝试让图像标题在悬停时覆盖整个图像，但是由于 Squarespace 的一些代码，我可以让它覆盖图像的底部。

这是我正在编辑的网站页面:

https://baikart.com/3rdall

这是我到目前为止更改标题的代码:

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper {
    position: absolute;
    color:#fff;
    top: 0%;
    bottom: 10%;
    left: 0%;
    right: 0%;
    opacity: 0;
    transition: all .5s ease;
    transform: translate(-0%,-0%);
    -webkit-transform: translate(-0%,-0%);
    -ms-transform: translate(-0%,-0%);
    -moz-transform: translate(-0%,-0%);   
}

提前致谢!

Answer 1

当您在 chrome 开发工具或其他工具中使用元素检查器时，您会看到有一个 max-height: 75% 应用于标题类。您需要在您的 CSS 中将其更改为 100%。

这是元素检查器中的内容

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper {
    max-height: 75%;
    opacity: 1;
    visibility: visible;
}