Question

我正在尝试创建滑动悬停效果。

但是我对图像的大小感到困惑。 1.图像不会只填满整个盒子，似乎右侧有一个空间 2.标题不会以屏幕为中心

这是我的标记：

<ul>

<li>
     <ul class="slide moveup">
        <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        </li>

        <li><img class="top" src="http://feelgoodburtonsnowboard.com/wp-content/uploads/2015/01/01.jpg" alt=""/></li>
    </ul>
</li>

<li>
     <ul class="slide moveup">
        <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        </li>

        <li><img class="top" src="images/01.jpg" alt=""/></li>
    </ul>
</li>


<li>
     <ul class="slide moveup">
        <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        </li>

        <li><img class="top" src="http://feelgoodburtonsnowboard.com/wp-content/uploads/2015/01/01.jpg" alt=""/></li>
    </ul>
</li>

</ul>

这是JSFIDDLE：http://jsfiddle.net/bbpw33db/2/

有什么想法吗？

Answer 1

图片小于列表宽度。因此，请使用width: 100%;作为图片：

.moveup img {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: top 0.4s ease-in-out 0s;
    width: 100%;
    max-width: 100%;
}

这是更新的fiddle。

根据您的评论更新:) ^{oops我忘记了}

.slide.moveup > li:before {
    content: "";
    display: inline-block;
    height: 100%;
}

updated fiddle

Answer 2

您需要编辑.moveup img

的CSS

.moveup img {
    position: absolute;
    left: 0;
    top: -15px;
    width: 100%; /*Fit the image to its container. the aspect ratio is preserved; the image will not be distorted*/
    -webkit-transition: top 0.4s ease-in-out;
    -moz-transition: top 0.4s ease-in-out;
    -o-transition: top 0.4s ease-in-out;
    transition: top 0.4s ease-in-out;
}

并将伪悬停类改为：

.moveup img.top:hover {
        top:-114%; /*set to a value to hide the whole image*/
        padding-bottom:200px;
    }

小提琴：http://jsfiddle.net/bbpw33db/16/

Answer 3

您的幻灯片div大于您的图片

将.slide宽度更改为260px

.slide {
    position: relative;
    width: 260px;
    height: 200px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    border: 3px solid red;
 }

http://jsfiddle.net/bbpw33db/12/

Answer 4

也许这就是你要找的东西：

   .top {
       width: 100%;
       height: 100%; 
    }

这是fiddle。

问候。

悬停图片不会＆＃39;修复标题的大小

4 个答案: