Question

当前，我正在正方形空间中使用CSS来尝试使图像标题覆盖悬停时的整个图像，但是由于某些正方形空间的代码，我可以使其覆盖图像的底部。

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

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

.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

从此处删除max-height

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

并设置height: 100%。

Answer 2

当您在chrome开发工具中使用元素检查器或其他工具时，您会看到最大高度：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;
}

使图像标题覆盖悬停时的整个图像

2 个答案: