我如何添加图像的css过渡以在div悬停时上下滑动

Question

我的引导行中有两个街区。 一个拥有图像，另一个拥有文本。 我把它们都包成一排。 每当我滚动图像时，都需要向下滑动一点，每当我穿过div时，我的意思是鼠标离开div时，图像再次需要向上移动一点。 我尝试通过在div上添加和删除类来进行尝试。 但是我并没有感到困惑，哪个过渡以及何时需要申请。 请帮我

<div class="container-fluid"><!-- /.container -->
<div class="row shopping"><!-- main here -->
          <div class="col-md-12">
            <div class="row shop4">
              <div class="col-md-6">
              <img src="images/leftzoom.jpg" width="50%"> 
              </div>
              <div class="col-md-6">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
              </div>
            </div>
</div>
        </div><!-- main here -->
        </div><!-- /.container --> 

Answer 1

只需在您的<img>或包含它的父<div>上添加转换。

 img { transition: transform .3s } img:hover { transform: translateY(1rem); } 

 <div> <img src="https://fillmurray.com/300/200" /> </div> 

Answer 2

您还可以使图像位置相对，并在top属性上添加过渡效果（向上移动为负值，向下移动为正值）：

 img { position:relative; top:0; transition:0.5s; } img:hover { top:10px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container-fluid"> <!-- /.container --> <div class="row shopping"> <!-- main here --> <div class="col-md-12"> <div class="row shop4"> <div class="col-md-6"> <img src="https://lorempixel.com/200/200/" width="50%"> </div> <div class="col-md-6"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> </div> </div> </div> </div> <!-- main here --> </div>