悬停时的CSS缩放图像

CSS zoom image on hover

本文关键字：缩放 图像 CSS 悬停      更新时间：2023-09-26

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

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

你知道我做错了什么吗？

使用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>

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

制作两个背景图像-普通和缩放悬停时更改背景图像。这应该行得通。

相关文章：