html - CSS animation using ::before class extends beyond the div

Question

I've added a slide animation to my portfolio website homepage, and I can't figure out how or why it is extending before the confines of the div it's attached to. On hover to extends left and right of the div.

Website is http://www.helencalderon.co.uk/

And the styles I'm using are

.card {
    background-color: #fff;
    position: relative;
    border: 2px solid #d6d2d2;
    margin-bottom: 2.8125%;
    max-width: 714px
}

@media only screen and (min-width: 714px) {
    .card {
        margin:0 auto 2.8125% auto
    }
}

@media only screen and (min-width: 1280px) {
    .card {
        display:flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        max-width: none
    }
}

.card::before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg)
}

.card:hover::before {
    -webkit-animation: shine 2s;
    animation: shine 2s
}

标签： htmlcss

Answer 1

您将 ::before 放置在容器的左侧left: -100%;，并将其移动到left: 125%;（因此在动画完成后将其放置在右侧 - 您将其移动到容器右侧 125% 的宽度）。使用transform: skewX(-25deg)也使你的 ::before 更宽。

要切断所有从你身上逃脱的东西，.card你可以添加overflow: hidden;它。