悬停时的CSS缩放图像

时间:2015-11-03 08:41:20

标签: javascript html 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 也不起作用。

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

2 个答案:

答案 0 :(得分: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>

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

答案 1 :(得分:-1)

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