使用CSS动画在悬停时修复图像宽度

时间：2016-06-02 16:31:39

标签： html css3 animation

我是CSS3动画的新手。目前，我正试图在容器悬停时将元素中的图像向左移动40px，但每次图像悬停时，它将为容器的右侧提供一个空的空间。我试图给图像一个更大的宽度，以确保它在悬停时不会给出任何空的空间，但它不起作用。 我不太确定如何说出来，所以我在这里放了一个截图。红色箭头显示容器悬停时留下的空白区域。 Screenshot of the said problem

这是所述元素的HTML和CSS代码：

HTML： 

<ul>
    <li class="opinion card wrapper">
                <div id="card" class="opinion card container">
                        <div class="opinion card image variation-3">
                            <a href="" class="opinion card article link"></a>
                        </div>
                            <div class="opinion card text variation-3">
                                <a href="">
                                    <h2 class="opinion card headline">
                                        <span class="highlight">Contoh judul pendek yang agak panjang tapi panjang</span>
                                    </h2>
                                </a>
                                <a href="/author" class="opinion card author link">
                                    <span class="highlight noTransition">Author Name</span>
                                </a>
                                <a href="/author" class="opinion card date link">
                                    <span class="highlight noTransition">Publication Date</span>
                                </a>

                                <p class="opinion card description">
                                    Indoor air pollution gets surprisingly little attention for such a lethal public health problem. It kills more people each year than HIV/AIDS and malaria combined, but few countries treat it as a crisis on the same level.
                                </p>
                            </div>
                        </div>
                </li>

        </ul>

CSS 

.opinion.card.wrapper {
    position: relative;
    display: inline-block;
    float: left;
    width: 25%;
    margin:0;
    padding: 0;
    overflow: hidden;
    color: white;
    box-sizing: border-box;
    background: transparent;
}

.card.wrapper {
    height: 618px;
}

.opinion.card.container {
    overflow: hidden;
    height: inherit;
    display: block;
    margin: 15px;
    position: relative;
}

.opinion.card.article.link {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 3;
}

.opinion.card.author.link {
    z-index: 1;
}

.opinion.card.image {
    background: url("https://i.imgur.com/SvO0n5b.jpg") no-repeat;
    background-position: center, center;
    background-size: cover;
    display: block;
    height: inherit;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 150%;
    cursor: pointer;
}

.opinion.card.image.variation-3 {
    background-image: url("https://i.imgur.com/SvO0n5b.jpg");
    position: relative;
    float: left;
    overflow: hidden;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
    max-width: none;
    width: 100%;
    height: -webkit-calc(100% + 50px);
    height: calc(100% + 50px);
    -webkit-filter: contrast(1.05) brightness(1.1);
    filter: contrast(1.05) brightness(1.1);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;/*

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;*/
}

.opinion.card.image.variation-2:before, 
.opinion.card.image.variation-3:before {
    content: "";
    position: absolute;

    height: 150%;
    top:-200;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    overflow:hidden;
}

.opinion.card.image.variation-3:before {
    background-color: rgba(0,0,0,0.3);
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
}

.opinion.card.text {
    float: left;
    text-align: left;
    margin: 30px 30px 45px 30px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.opinion.card.text.variation-3 {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
}

.opinion.card.headline {
    font-family: "Patua One", "Georgia", serif;
    font-size: 40px;
    font-size: 2.2222rem;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
}

.opinion.card.author,
.opinion.card.date {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 18px;
    font-size: 1rem;
    color: #505eea;
    position: relative;
}


.opinion.card.description {
    font-family: "Roboto", "Arial", sans-serif;
    font-size: 16px;
    font-size: 0.8889rem;
    font-style: italic;
    color: #f1f1f1;
    width: 90%;
    margin-top: 30px;
    line-height: 1.5;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.opinion.card.description:before {
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #fff;
    content: "";
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

.opinion.card .highlight {
    background-color: #000;
    padding: 5px;
}


.opinion.card.container:hover .opinion.card.image {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


.opinion.card.container:hover .opinion.card.image.variation-3 {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0, 0);
    transform: translate3d(-40px,0,0);
    width: 100%;
}

.opinion.card.container:hover .opinion.card.image.variation-2:before {
    opacity: 1;
    /*background-color: rgba(0,0,0,0.2);*/
    background-image: url(img/pattern_2.png);
}

.opinion.card.container:hover .opinion.card.image.variation-3:before,
.opinion.card.container:hover .opinion.card.container:after {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;

}

.opinion.card.container:hover .opinion.card.container:after,
.opinion.card.container:hover .opinion.card.description:before, {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.opinion.card.container:hover .opinion.card.text.variation-3,
.opinion.card.container:hover .opinion.card.description:before {
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);

}

.opinion.card.container:hover .opinion.card.description,
.opinion.card.container:hover .opinion.card.container:after {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

.opinion.card.container:hover .opinion.card.container:after {
    width: 100%;
    height: 100%;
}

.opinion.card.container:hover .opinion.card.headline {
    color: #505eea;
    transition: 0.3s ease-in-out;
}

.opinion.card.container:hover .opinion.card.author {
    transition: color 0s;
}

a.opinion.card.author:hover {
    color: #fff;
    transition: all 0.3s ease-in-out;
}

@media (min-width: 1280px) {

.home.container {
    margin: auto;
    max-width: 1200px;
}


.card.wrapper {
    height: 618px;
}


.opinion.card.wrapper {
    display: inline-block;
    width: 33.3333333%;
    min-width: 33.3333333%;
}

.opinion.card.wrapper:first-child {
    width: 66.66666666666%;
}

}

JSFiddle：https://jsfiddle.net/fatzjuhe/1/

我不拥有这里使用的图像，我只是从Imgur拍了一张随机图片以便更好地观看。 任何帮助将非常感谢。谢谢！

1 个答案:

答案 0 :(得分：1)

我已经解决了自己的问题。基本上，我搞砸了.variation-3类中的max-width和min-width属性。我还定义了悬停图像的width属性（应该在悬停之前从图像状态继承）。它现在完美无缺。

.opinion.card.image.variation-3 {
        background-image: url("https://i.imgur.com/SvO0n5b.jpg");
        float: left;
        overflow: hidden;
        display: block;
        width: 120%;
        -webkit-filter: contrast(1.05) brightness(1.1);
        filter: contrast(1.05) brightness(1.1);
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

        .opinion.card.container:hover .opinion.card.image.variation-3 {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-40px,0, 0);
        transform: translate3d(-40px,0,0);
    }

谢谢！ JSFIDDLE： https://jsfiddle.net/fatzjuhe/2/

相关问题
最新问题