Диапазон "маскировки" в div работает в обычном HTML, но не WordPress

#html #css #wordpress #animation

#HTML #css #wordpress #Анимация

Вопрос:

У меня проблема с простой CSS-анимацией, которая работает в обычном HTML-документе, но почему-то не в моем блоге WordPress.

Это простой HTML-код с CSS, который показывает плавную анимацию:

     .loved-posts-container {
        flex-grow: 1;
        width: 100%;
    }
    .loved-posts-block {
        padding-left: calc((100vw - 61.89rem) / 2);
        padding-right: calc((100vw - 61.89rem) / 2);
        max-width: 100vw;
        position: relative;
    }

    .loved-posts-content {
        margin: 0 auto;
        position: relative;
    }
    .loved-posts-listing {
        margin: -1.375rem;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .loved-posts-container .item {
        width: calc(100% / 3);
        padding: 1.375rem;
        position: relative;
        display: block;
        box-sizing: border-box;
    }
    .loved-posts-container .img.wrap8 {
        overflow: hidden;
        display: block;
        position: relative;
        margin-bottom: 1.875rem;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    } 
    .loved-posts-container .image {
        background: red;
        height: 346px;
        display: block;
        width: 100%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
}
    .loved-posts-container .overlay {
        color: #000000;
        background-color: #FFFFFF;
        padding: 1.75rem;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: calc(100% - 2.25rem);
        height: calc(100% - 2.25rem);
        transform: translate(-50%,0);
        bottom: 100%;
        top: auto;
        transition: transform .5s,bottom .5s;
        transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);

        font-family: Lora Regular;
        font-size: 0.5625rem;
        letter-spacing: 0.25em;
        word-spacing: 0em;
        line-height: 1em;
        text-transform: none;
        font-weight: normal;
    }

    .loved-posts-container .item:hover .overlay {
        transform: translate(-50%,50%);
        bottom: 50%;
    }

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ServiceFix</title>
  <meta name="description" content="ServiceFix">
  <meta name="author" content="ServiceFix">
</head>
<body>

<div class="loved-posts-container">
    <div class="loved-posts-block">
        <div class="loved-posts-content">
            <div class="loved-posts-listing">
                <a class="item" href="">
                    <span class="img-wrap">
                        <span class="image"></span>
                        <span class="overlay">READ THE STORY</span>
                    </span>
                </a>
                <a class="item" href="">
                    <span class="img-wrap">
                        <span class="image"></span>
                        <span class="overlay">READ THE STORY</span>
                    </span>
                </a>
                <a class="item" href="">
                    <span class="img-wrap">
                        <span class="image"></span>
                        <span class="overlay">READ THE STORY</span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Но когда я вставляю этот код в свой index.php и CSS в my style.css , он работает некорректно. Белые интервалы не замаскированы в красном div, они все еще находятся выше. Который вы можете увидеть здесь, внизу:

https://duni-cheri.de/

Не могли бы вы сказать мне, чего мне не хватает?

1. Почему это помечено PHP? В вашем вопросе нет PHP-кода

2. Сторона WordPress, на которую я ссылался, имеет index.php и код там не работает. Я здесь новичок…

3. Верно, но ваш вопрос даже не относится к PHP, поэтому его не следует помечать как таковой.

4. Я понимаю, спасибо за исправление

Ответ №1:

Добавьте это, и это должно сработать.

    .loved-posts-container .item {
        overflow: hidden;
    }

На мой взгляд, диапазон просто переводится поверх контейнера. В вашем примере белые поля тоже должны быть там.

Если вы добавите родительскому элементу margin-, padding-top или другой контент выше, <span class="overlay">READ THE STORY</span> он должен появиться снова.

Если вы хотите что-то скрыть, вам нужно добавить overflow:hidden;