使用transition过渡属性使div上移，下一层的div也跟着上移

在使用transition是图片上移，第一行最后一张图片上移时，导致下一层的图片上移了.

img

img


<style>
.movie .item {
    position: relative;
    transition: all 0.2s linear;
}

.movie .item:hover {
    margin-top: -10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
</style>

<body>
<div class="movie container">
        <h2 class="title">影片展示</h2>
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/1.png" alt="">
                    <p>无限</p>
                </div>

            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/2.png" alt="">
                    <p> 头号玩家</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/3.png" alt="">
                    <p> 狂暴巨兽</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/4.png" alt="">
                    <p>复仇者联盟4：终局之战</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/5.png" alt="">
                    <p>沙丘</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/6.png" alt="" />
                    <p>朱雀战纪</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/7.png" alt="">
                    <p>复仇者联盟3：无限战争</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="item">
                    <img src="img/8.png" alt="">
                    <p>变形金刚5：最后的骑士</p>
                </div>
            </div>
        </div>
    </div>
</body>

尝试过用定位position:absolute;没有效果，div盒子出现闪烁。想要实现滑过每一个div盒子，都能上移。

.movie .item给固定高度且overflow:hidden

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632