Question

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

以下代码不会缩放背景图像。相反，它会缩放前面板。问题是，我没有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 也不起作用。

你怎么知道我做错了什么？

Answer 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;
}

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

修改：更改了标签以匹配提供的标签。

Answer 2

制作两张背景图片 - 正常和缩放悬停时更改背景图像。这应该有用。

悬停时的CSS缩放图像

2 个答案: