Html 缩放容器悬停上的背景图像

我有一个背景图像，它有一个背景颜色覆盖，我正试图使用

transform:scale3d（1.1,1.1,1）来缩放它当我悬停在它的容器上时

即使代码出现在检查器中，它也不会生效

这就是CSS，每当我将鼠标悬停在
项上时，它都应该缩放背景图像

.item:hover .img-container {
    transform: scale3d(1.1,1.1,1);
    -webkit-transform: scale3d(1.1,1.1,1);
    -moz-transform: scale3d(1.1,1.1,1);
    opacity: .2;
}

演示

HTML

它不起作用，因为背景图像没有设置为
img容器
，而是设置为
article.item

如果希望代码正常工作，应该将背景图像放到正确的容器中

并且，从
中删除
opacity:.2
。项目：hover.img container
并添加
。项目：hover.img container:在{opacity:.2}

请参阅代码片段或


.item{
高度：450px；
位置：相对位置；
溢出：隐藏；
}
.项目：在{
显示：块；
内容：“；
宽度：100%；
垫面：68.17%；
}
.项目内容{
位置：绝对！重要；
排名：0；
左：0；
右：0；
底部：0；
溢出：隐藏；
}
.img集装箱{
webkit背景尺寸：封面！重要；
-moz背景尺寸：封面！重要；
-o-背景尺寸：封面！重要；
背景尺寸：封面！重要；
位置：绝对位置；
顶部：-1px；
左：-2px；
右：-2px；
底部：-1px；
-webkit过渡：全部5秒；
-moz转换：全部为0.5s；
过渡：全部5秒；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz变换原点：0；
变换：translate3d（0,0,0）；
}
.img容器：之后{
不透明度：.5；
背景：#26D0CE；
背景：-莫兹线性梯度（45度，#1A2980 0，#26D0CE 100%）；
背景：-webkit渐变（左下、右上、颜色停止（0，#1A2980）、颜色停止（100%，#26D0CE））；
背景：-webkit线性梯度（45度，#1A2980 0，#26D0CE 100%）；
背景：-o型线性梯度（45度，#1A2980 0，#26D0CE 100%）；
背景：-ms线性梯度（45度，#1A2980 0，#26D0CE 100%）；
背景：线性梯度（45度，#1A2980 0，#26D0CE 100%）；
-webkit过渡：全部.35秒轻松；
-moz过渡：所有.35秒轻松；
-o型过渡：全部.35秒缓解；
过渡：全部.35秒轻松；
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.项目：悬停.img容器{
变换：scale3d（1.1,1.1,1）；
-webkit转换：scale3d（1.1,1.1,1）；
-moz变换：scale3d（1.1,1.1,1）；
}
.项目：悬停。img容器：之后{
不透明度：.2
}
.内容容器{
位置：绝对位置；
底部：15px；
左：20px；
右：20px；
填充：0；
最大高度：75%；
溢出：隐藏；
指针事件：无；
变换：translate3d（0,0,0）；
-webkit背面可见性：隐藏；
}

标题在这里
将此类添加到css中

article:hover{transform: scale3d(1.1,1.1,1);
-webkit-transform: scale3d(1.1,1.1,1);
-moz-transform: scale3d(1.1,1.1,1);
opacity:0.2;}

太好了，谢谢你。但是如果你不介意我问，为什么我现在悬停在上面时会得到一个白色背景，而不是我选择的颜色？白色背景是因为不透明度：悬停时为0.2，
项下的背景为灰色/白色（默认的身体背景）。而且因为
：after
被设置为与您给定的不透明度相同的项目：0.2，所以它也会获得该样式。因此，将
：在
项之后设置
，而不是
img容器
。参见此处，这增加了另一个问题，我希望背景图像正确显示，而不是白色背景使其更加模糊。就像我的原始代码一样，当你将鼠标悬停在上面时，图像会变得更清晰。如果我没弄错的话，你想要这样的东西吗？从
删除不透明度：.2。项：hover.img container
并将其添加到`。项：hover.img container:after{opacity:.2}`中，而不是使用最终解决方案编辑我的答案。很高兴我能帮忙。干杯D
.item {
    height: 450px;
    position: relative;
    overflow: hidden;
}

.item:before {
    display: block;
    content: " ";
    width: 100%;
    padding-top: 68.17%;
}

.item-content {
    position: absolute!important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.img-container {
    webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    position: absolute;
    top: -1px;
    left: -2px;
    right: -2px;
    bottom: -1px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-origin: 0 0;
    transform: translate3d(0,0,0);
}

.img-container:after {
    opacity: .5;
    background: #26D0CE;
    background: -moz-linear-gradient(45deg,#1A2980 0,#26D0CE 100%);
    background: -webkit-gradient(left bottom,right top,color-stop(0,#1A2980),color-stop(100%,#26D0CE));
    background: -webkit-linear-gradient(45deg,#1A2980 0,#26D0CE 100%);
    background: -o-linear-gradient(45deg,#1A2980 0,#26D0CE 100%);
    background: -ms-linear-gradient(45deg,#1A2980 0,#26D0CE 100%);
    background: linear-gradient(45deg,#1A2980 0,#26D0CE 100%);
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.item:hover .img-container {
    transform: scale3d(1.1,1.1,1);
    -webkit-transform: scale3d(1.1,1.1,1);
    -moz-transform: scale3d(1.1,1.1,1);
    opacity: .2;
}

.content-container {
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    padding: 0;
    max-height: 75%;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
}

article:hover{transform: scale3d(1.1,1.1,1);
-webkit-transform: scale3d(1.1,1.1,1);
-moz-transform: scale3d(1.1,1.1,1);
opacity:0.2;}