Question

我对简单的CSS动画有问题，该CSS动画可以在普通的HTML文档上工作，但在我的WordPress博客上却不行。

这是带有CSS的纯HTML代码，可显示平滑的动画：

    .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中插入此代码并将style.css中的CSS插入时，它无法正常工作。白色范围未掩盖到红色div中，它们仍位于上方。您可以在底部看到它：

https://duni-cheri.de/

你能告诉我我在想什么吗？

Answer 1

添加它，它应该可以工作。

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

正如我所见，跨度只是在容器上平移。在您的示例中，白框也应该存在。

如果您给父级留出一定的边距，顶部或在上面添加其他内容，则<span class="overlay">READ THE STORY</span>应该会重新出现。

如果您想隐藏某些东西，则必须添加overflow:hidden;

div中的“蒙版”跨度仅适用于纯HTML，但不适用于wordpress

1 个答案: