Сделайте так, чтобы заголовок изображения покрывал все изображение при наведении

Question

В настоящее время я использую css в squarespace, чтобы сделать так, чтобы заголовки изображений покрывали все изображение при наведении, но из-за некоторого кода squarespace я могу сделать так, чтобы он покрывал нижнюю часть изображения.

Вот страница сайта, которую я редактирую:

И вот код, который у меня есть, чтобы изменить заголовок:

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

Заранее спасибо!

html css

0

baik

Answer 1

Когда вы смотрите с помощью инспектора элементов в инструментах разработчика Chrome или что-то в этом роде, вы видите, что максимальная высота: 75% применяется к классу заголовка. Вам нужно изменить это на 100% в вашем CSS.

Это то, что в элементе инспектора

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

Answer 2

Удалите max-height отсюда

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

и установите height: 100% .

Сделайте так, чтобы заголовок изображения покрывал все изображение при наведении

2 ответа

Новые вопросы

html