CSS动画图片从小到大居中

Question

我一直在努力使这个图像更大并居中。

确定看这个视频，它只有 9 秒。

https://youtu.be/b-5KPH_RGIg

这是 Action

https://jsfiddle.net/09b74624/1/

我正在使用:

.biggerCenter {transform:scale(0.1); transition:transform 0.5s linear; }
.biggerCenter:hover { transform:translate(-50%, -50%) scale(1); }

如何完成这件事？

我的代码有什么问题？

谢谢

Answer 1

您的翻译没有在两侧留出足够的空间。假设您的图片占 50%，则每边都需要占 25%。 Here是基于您的示例的工作 fiddle 。

.biggerCenter:hover
{
  transform:translate(+25%, +25%) scale(1);
}

此外，我建议您使用一个不错的插件。 Fancybox做你需要的。