html - Bump Up Hover 效果，破坏元素下的线条

Question

我想要碰撞悬停效果，这样如果有人将鼠标移到卡片上，它就会抬起。问题是，如果有人越过最后一个元素，它会破坏它下面的线。它总是每行的最后一个对象，我被困在这里。

<div class="container">
    <div class="col-lg-9 col-lg-offset-3 text-center" >

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model44.jpg">
            </div>
            <div class="model-card-content">
                <p>Alex Libby</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model43.jpg">
            </div>
            <div class="model-card-content">
                <p>Aida Artiles</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model45.jpg">
            </div>
            <div class="model-card-content">
                <p>Alex Zambiazi</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model42.jpg">
            </div>
            <div class="model-card-content">
                <p>Adeola Zimmer</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model8.jpg">
            </div>
            <div class="model-card-content">
                <p>Aki von Glasgow</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model1.jpg">
            </div>
            <div class="model-card-content">
                <p>Anja Peric</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

我在 bootply 文件中有 html 和 css 文件。 bootply

.model-card {
display: inline-block;
position: relative;
margin: 0em 0.7em 1.4em 0.7em;
background-color: #fff;
transition: box-shadow .25s;
width: 15em;
padding:0px;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; 

.model-card:hover {
margin-top: 2px;

Answer 1

使用 transform和 translate而不是 margin对于动画，并更新 transition属性(property)。

所以替换

.model-card:hover {
    margin-top: 2px;
}

与

.model-card:hover {
    transform: translateY(-2px);
}

演示:http://www.bootply.com/jHToqy4fwh