悬停时的CSS缩放图像[重复]答案

【问题标题】：CSS zoom image on hover [duplicate]悬停时的CSS缩放图像[重复]
【发布时间】：2016-02-03 08:12:13
【问题描述】：

我想在悬停时缩放背景图像。

下面的代码不会缩放背景图像。相反，它会缩放前面的面板。问题是，我没有任何用于 img 的 div 标签。我在正文中添加了一个类。

.imageNeutral{
    background-image: url('../App/Images/nature.jpg');
    /*background-attachment: fixed;*/
    opacity: 0.8;
    overflow: auto;

}

.imageNeutral{
    -webkit-transition: all 3s ease; 
    -moz-transition: all 3s ease; 
    -o-transition: all 3s ease; 
    -ms-transition: all 3s ease; 
    transition: all 3s ease;
    max-width: 100%;
}

.imageNeutral:hover
    -webkit-transform:scale(1.05); 
    -moz-transform:scale(1.05); 
    -ms-transform:scale(1.05); 
    -o-transform:scale(1.05); 
    transform:scale(1.05);
}

在javascript中：

 $("body").addClass('imageNeutral');

所有其他元素都被缩放，但不是图像。我只是想放大图像。

.imageNeutral img:hover 也不起作用。

你知道我做错了什么吗？

【问题讨论】：

你试过搜索这个问题吗？

标签： javascript html css

【解决方案1】：

使用background-size 为正常和悬停设置背景大小并为其设置动画。

.imageNeutral {
    background: url('http://lorempixel.com/400/400/');
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    width: 100%;
    height: 500px;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
}
.imageNeutral:hover {
    -webkit-background-size: 120% auto;
    background-size: 120% auto;
}

&lt;body class="imageNeutral"&gt;&lt;/body&gt;

编辑：更改标签以匹配提供的标签。

【讨论】：

我不能使用 div-tag 因为我有很多 ng-views，并且我在指令中更改了背景图像
我已更新标签以匹配您的标签。
感谢您的帖子。

【解决方案2】：

制作两个背景图像 - 正常和缩放悬停时更改背景图像。应该可以的。

【讨论】：