Question

我正在使用css3，当你将鼠标悬停在它上面时，它会像this一样向上滑动

我找到了这个example，但我不想要这个盒子的背景属性。

    <div class="box">
  <img src=image/image.jpg>
    </div>

图片源来自html，而不是css背景属性

我只是想知道是否有人可以指点我一个好的教程或者可以帮助我吗？

Answer 1

我已经想出了一个快速的例子，你可以做到这一点，你可以发挥改变价值并改进它。我希望它有所帮助。

 .box{
  display: block;
  width: 200px;
  height: 100px;
  overflow: hidden;
  background: black;
}
.box img{
  width:200px;
  float:left; 
}
.box:hover img{
  margin-top:-200px;
  -webkit-transition: margin 1s;
  -moz-transition: margin 1s;
  transition: margin 1s;
}

实施例： https://jsfiddle.net/pqrnt921/1/

Answer 2

如果将过渡属性移动到正常状态，纯CSS3上滑过渡效果会更好，如下所示：

.box{ 
  display: block;
  width: 200px;
  height: 100px;
  overflow: hidden;
  background: black;
}
.box img{ /* Normal state */
  width:200px;
  float:left;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}
.box:hover img{
  margin-top:-200px;
}

通过这种方式，在推出时你将获得一个很好的过渡到原始位置。

Answer 3

如果你想让它更通用，那么你不必担心你正在使用什么图像（我的意思是，你不必担心图像宽度），我建议使用public Action() { CurrentTransaction = System.Transactions.Transaction.Current; }， background-image和background-position。这是docs示例。

Answer 4

基于Joe的回答，非常感谢Joe：）。

要进行从上到下的滑动，只需使用以下代码即可。

div {
  width: 400px;
  height: 200px;
  background-image: url('https://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fisolpro.in');
  background-size: cover;
  background-position: top;
  transition: all 2s;
}

div:hover {
  background-position: bottom;
}

<div>
</div>

顺便说一句，我已经使用https://snapito.com/拍摄了我的网站的全屏截图。

悬停图像在css上向上滑动

4 个答案: