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

Question

我的 Bootstrap 行中有两个 block 。一个有图像，另一个有文字。我把它们都包成一排。每当我滚动图像时，图像需要向下滑动一点点，每当我穿过 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>