html - CSS3 过渡 - 扩展图像的可见部分

Question

我想使用 CSS3 进行转换，但我是这个主题的新手，无法真正了解我应该如何开始我的想法。我做了一些研究，但我有一个非常具体的想法，并且没有那么多可用的例子。

我想做一个只在开始时显示第一张卡片的过渡，但是当悬停在上面时，图像框会缓慢展开，因此其他卡片会出现。

有谁知道如何做到这一点？这对我来说将是一个很大的帮助和一个很好的教训。

提前致谢

Answer 1

创建一个<div class="cards">带有图像背景的元素：

div.cards {
  width: 43px;
  /* width of one card */
  height: 65px;
  background: url(http://i.stack.imgur.com/ivCAY.png) 0 0 no-repeat;
  -webkit-transition: width 2s;
  transition: width 2s;
}
/* then on hover: */

div.cards:hover {
  width: 550px;
  /* width of full image */
}

<div class=cards />