图像悬停时的缩放效果 CSS

Question

我想在图像悬停时添加缩放效果，我将 post 我的代码如下：

<asp:TableRow>
    <asp:TableCell CssClass="space">
       <a href="www.google.com" id="myImage" runat="server">
       <img src="Images/myIcon" style="border: none;" alt="my text goes here" /></a>
    </asp:TableCell>

CSS:

.space {
padding-bottom: .6em;
}

.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
 transform:scale(1.25);
}

目前这不是运行我附加的悬停 css...关于为什么它不是运行悬停 css 的任何想法？

Answer 1

.image 似乎未在您的示例中定义：

.image:hover img {

尝试：

.space:hover img

Answer 2

使用缩放属性缩放和过渡动画

.img:hover
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

如需完整教程，请单击此处 http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

图像悬停时的缩放效果 CSS

Zoom Effect on Hover of Image CSS

html

css

hover