«Маскировка» в div работает в простом HTML, но не в wordpress - PullRequest
Новая
       0

«Маскировка» в div работает в простом HTML, но не в wordpress

0 голосов
/ 15 марта 2019

У меня проблема с простой анимацией 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 в моем style.css, он не работает правильно. Белые пролеты не замаскированы в красный div, они все еще лежат наверху. Что вы можете увидеть здесь внизу:

https://duni -cheri.de /

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

1 Ответ

0 голосов
/ 15 марта 2019

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...