悬停时CSS缩放图像

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

下面的代码不缩放背景图片。相反，它放大了前面的面板。问题是，我没有任何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也行不通。

你有什么想法我做错了什么？

来源

2015-11-03 Minas Minas

您是否尝试搜索此问题？ –

设置背景大小使用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; 
 
}

<body class="imageNeutral"></body>

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

来源

2015-11-03 08:50:16 Justas

我不能使用div标签，因为我有许多ng-views，并且我更改了指令 –

中的背景图片我已经更新了标签以符合您的要求。 – Justas

感谢您的帖子。 –

-1

制作两个背景图像 - 正常和缩放关于悬停更改背景图像。这应该工作。

来源

2015-11-03 08:45:24

悬停时CSS缩放图像

回答

相关问题