javascript - 如何在悬停时使图像在 div 中向上移动

Question

我有一个关于如何制作一个 div 的问题，当你悬停它时，里面的图像会向上移动到 div 中。

到目前为止，这是我的代码:

<div id="div1">
  <div id="div2">
    <img src="http://dummyimage.com/300x300/000/fff" width="300px" height="300px">
  </div>
</div>

CSS

#div1 { 
    width: 300px;
    height: 300px;
    border: 2px black solid;
    position: absolute;
    top: 100px;
    left: 500px;
    overflow: hidden;
}

#div2 img {
    position: absolute;
    top:200px;
}

位于 div1 中的这张图像位于 div 的底部，溢出的其余部分被隐藏。我希望它在悬停 div 时向上移动。

关于如何解决这个问题的任何想法？我打算使用转换 css 并对其进行翻译，但我不确定是否有更好的方法可以通过 JQuery 完成此操作。

告诉我你的想法

Answer 1

这是在 hover 上进行转换的纯 css 方法

#div1 {
  width: 300px;
  height: 300px;
  border: 2px black solid;
  position: relative;
  overflow: hidden;
}
#div2 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in;
}
#div1:hover img {
  top: 30%;
}

<div id="div1">
  <div id="div2">
    <img src="http://placehold.it/350x150">
  </div>
</div>