CSS3 Transition - 扩展图像的可见部分

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 />