旋转木马松散响应行为 "image in div" 放大胡佛效应

Question

使用flickity carousel I've created the following example here in codepen.io link。这是我实现的 CSS 代码：

CSS

.image-hoover { 
  overflow: hidden;
}



.image-hoover img {
 -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;
}



.image-hoover:hover img {
  -moz-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  -webkit-transition: all 10s linear;
  -moz-transition:    all 10s linear;
  -o-transition:      all 10s linear;
  -ms-transition:     all 10s linear;
  transition:         all 10s linear;
}

我无法弄清楚的问题是，只有在我关闭这部分之前，图像才会失去响应行为：

.image-hoover img {
 -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;
}

但是在这种情况下，当您将图像 returns 移回原来的尺寸时，过渡效果很快就会消失，您能否建议如何解决这个问题？

1. Here 图像的响应行为存在，但 hoover 松散过渡上的缩放效果。

2. 在 this 示例中，您可以注意到过渡效果很好，但是如果您调整 window 图像的大小，它们的响应行为就会丢失。

Answer 1

发生这种情况是因为您说过将过渡应用于所有操作，因此当屏幕宽度改变时图像发生变化时也会发生 10 秒过渡。

你需要改变

-webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;

至

-webkit-transition: -webkit-transform: 10s ease;
  -moz-transition:    -moz-transform 10s ease;
  -o-transition:      transform 10s ease;
  -ms-transition:     transform 10s ease;
  transition:         transform 10s ease;

并删除 :hover 的过渡效果。现在可以使用了。

Fiddle-http://codepen.io/anon/pen/eJWQRq?editors=110

旋转木马松散响应行为 "image in div" 放大胡佛效应

Carousel loose responsive behaviour with "image in div" zooming on hoover effect

javascript

css

jquery

carousel

css-transitions