悬停时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也行不通。
你有什么想法我做错了什么?
答
设置背景大小使用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>
编辑:更改标签,以匹配提供的。
答
制作两个背景图像 - 正常和缩放 关于悬停更改背景图像。这应该工作。
您是否尝试搜索此问题? –