悬停时的CSS缩放图像[复制]

This question already has an answer here:

这个问题在这里已有答案:

Creating a Zoom Effect on an image on hover using CSS? 12 answers

使用CSS在悬停时在图像上创建缩放效果? 12个答案

I want to zoom the background image on hover.

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

The code below does not zoom the background image. Instead it zooms the panels which are on the front. The problem is, that I do not have any div-tag for the img. I add a class to the body.

下面的代码不会缩放背景图像。相反,它会缩放前面板。问题是,我没有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);
}

in javascript:

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

all other elements are zoomed, but not the image. I just want to zoom the image.

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

.imageNeutral img:hover does also not work.

.imageNeutral img:hover也行不通。

do you have any idea what I am doing wrong?

你知道我做错了什么吗?

2 个解决方案

#1

Set background size using background-size for both normal and hovered and animate it.

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

.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>

Edit: Changed tags to match the ones provided.

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

#2

-1

Make two background images - normal and zoomed An on hover change the background image. That should work.

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

#1