如何修复此鼠标悬停变换比例效果（提供动画）答案

【问题标题】：How to fix this mouse hover transform scale effect (animation provided)如何修复此鼠标悬停变换比例效果（提供动画）
【发布时间】：2016-08-23 22:27:26
【问题描述】：

我有一个带有图像的 GridView，所以如果我将鼠标悬停在上方，它会正确显示图像，但是如果我向下移动，则不会。我认为问题是 CSS 导致了覆盖，但我不知道如何解决它。

这是我的 CSS 代码：

.enlarge:hover {
    transform:scale(5);
    transform-origin:20% 20%;
}

标记：

<asp:ImageField ItemStyle-CssClass="enlarge" DataImageUrlField="FileName" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ControlStyle-Height="20px" HeaderText="Swatch">
     <HeaderStyle HorizontalAlign="Center"/>
</asp:ImageField>

动画作者：http://www.screentogif.com（用于截屏到 gif 的绝佳工具 - 无从属关系）

【问题讨论】：

标签： javascript jquery asp.net css

【解决方案1】：

用添加img的这个CSS修复它：

.enlarge:hover img {
    -webkit-transform: scale(15);
    -moz-transform: scale(15);
    -o-transform: scale(15);
    transform: scale(15);
    transform-origin: -15% 50%;
}

【讨论】：