Javascript “如何制作图像”；即将到来；突出

我的目标是显示一个图像，并将其缓慢地放到前台（并在主要时间扩展它）。我希望当我在div/img上检测到mouseover事件时可以做到这一点

目前，我使用隐藏属性，但我不喜欢它，因为它类似于：出现/消失，没有过渡

我希望有一个具有CSS/CSS3属性的解决方案可以做到这一点。但是我没有找到。我尝试了一些与动画。但它几乎没有失败

有人知道怎么做这种事吗？我使用的是基本的html/css/js，但我可以使用bootstrap（如果它有一个好的解决方案的话）

---

谢谢。

您可以通过CSS转换实现这一点。你可以使用缩放功能。这里有一些你可以玩的东西来得到你想要的：

编辑：

如果希望在开始时将其隐藏，然后淡入并缩放，可以使用不透明度：

---

向我们展示一些代码，我们可以轻松地扩展/更新您的功能。

img{
    transition: all 1s;
}

img:hover{
    -webkit-transform:scale(2);
    transform:scale(1.2);
}

img{
    transition: all 2s;
    opacity:0;
}

img:hover{
    -webkit-transform:scale(2);
    transform:scale(1.2);
    opacity:1;
}