如何制作图像＆＃34;即将到来＆＃34;前景

Question

我的目标是显示图像并将其缓慢地带到前景（并在主时间延长）。我希望当我在div / img上检测到事件onmouseover时可以这样做。

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

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

有人知道如何做这样的thinqs吗？我使用基本的html / css / js，但我可以使用bootstrap（如果它有一个很好的解决方案）。

感谢。

Answer 1

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

http://jsfiddle.net/v2kHU/1/

img{
    transition: all 1s;
}

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

编辑：

如果你想让它在开头隐藏然后淡入和缩放，你可以使用不透明度：

http://jsfiddle.net/v2kHU/2/

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

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