javascript淡入淡出/缩放效果。。我做错了什么

我希望第二层背景色在图片div2中淡入（不透明度）并缩放。。试着创造一些像

这是你的电话号码

我不能发布整个代码，因为我没有足够的分数。。。请按照链接并建议应该做什么

JQuery

    $(document).ready(function() {
    $(".background-color-container").css("opacity", 0.5);
    $(".background-color-container").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
});

---

在解决方案中使用此逻辑

div{
高度：200px；
宽度：200px；
背景：url（'http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
背景大小：100%100%；
-moz转换：全部为0.5s；
-webkit过渡：全部5秒；
过渡：全部5秒；
背景位置：中心；
}
div:悬停{
背景尺寸：150%150%；
}

---

在解决方案中使用此逻辑

div{
高度：200px；
宽度：200px；
背景：url（'http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
背景大小：100%100%；
-moz转换：全部为0.5s；
-webkit过渡：全部5秒；
过渡：全部5秒；
背景位置：中心；
}
div:悬停{
背景尺寸：150%150%；
}

---

您可以直接使用css转换：

只需添加以下内容：

#imgDemo:hover .div3 img{
  transform: scale(1.25);
}

#imgDemo:hover .div2 img{
  opacity: 0.5;
}

.div3 img {
   transition: transform 0.3s ease-in;
}
.div2 img {
   transition: opacity 0.3s ease-in;
}

下面是您的工作示例：

.div1{
位置：相对位置；
宽度：600px；
高度：400px；
背景色：红色；
z指数：99；
}
.第2分部{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.第2分部{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.第3分部{
位置：绝对位置；
宽度：100%；
身高：100%；
对齐项目：居中；
}
.图像容器{
证明内容：中心；
身高：100%；
宽度：100%；
对齐项目：居中；
显示器：flex；
}
.图像容器img{
宽度：125px！重要；
保证金：自动；
位置：相对位置；
高度：自动；
z指数：40；
}
.div1:hover.div3 img{
转换：比例（1.25）；
}
.div1:悬停.div2 img{
不透明度：0.5；
}
.第3分部{
过渡：0.3s轻松过渡；
}
.第2分部{
过渡：不透明度0.3s；
}

---

您可以直接使用css转换：

只需添加以下内容：

#imgDemo:hover .div3 img{
  transform: scale(1.25);
}

#imgDemo:hover .div2 img{
  opacity: 0.5;
}

.div3 img {
   transition: transform 0.3s ease-in;
}
.div2 img {
   transition: opacity 0.3s ease-in;
}

下面是您的工作示例：

.div1{
位置：相对位置；
宽度：600px；
高度：400px；
背景色：红色；
z指数：99；
}
.第2分部{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.第2分部{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.第3分部{
位置：绝对位置；
宽度：100%；
身高：100%；
对齐项目：居中；
}
.图像容器{
证明内容：中心；
身高：100%；
宽度：100%；
对齐项目：居中；
显示器：flex；
}
.图像容器img{
宽度：125px！重要；
保证金：自动；
位置：相对位置；
高度：自动；
z指数：40；
}
.div1:hover.div3 img{
转换：比例（1.25）；
}
.div1:悬停.div2 img{
不透明度：0.5；
}
.第3分部{
过渡：0.3s轻松过渡；
}
.第2分部{
过渡：不透明度0.3s；
}

这就是您要找的吗？我在fiddle中添加了jQuery，在第一个div中添加了同样缺失的

id=“imgDemo”

，我认为这会更简单。@ChrisG是这样的，但我希望红色背景颜色隐藏图片，并且只通过减少背景的不透明度在鼠标上显示。。还有要放大的图片。@Thena你能告诉我你所说的“放大”是什么意思吗？就像它从小开始然后变大？让我知道。我想我能帮上忙好的，我已经解决了问题，但是放松似乎不起作用。。。更新的链接。。。。图片突然跳进跳出。。。如果你们能帮我弄清楚的话。我想让它慢慢进出。这就是你要找的吗？我在fiddle中添加了jQuery，在第一个div中添加了同样缺失的

id=“imgDemo”

，我认为这会更简单。@ChrisG是这样的，但我希望红色背景颜色隐藏图片，并且只通过减少背景的不透明度在鼠标上显示。。还有要放大的图片。@Thena你能告诉我你所说的“放大”是什么意思吗？就像它从小开始然后变大？让我知道。我想我能帮上忙好的，我已经解决了问题，但是放松似乎不起作用。。。更新的链接。。。。图片突然跳进跳出。。。如果你们能帮我弄清楚的话。我想让它慢慢地进出。谢谢。。。已经整理好了。谢谢。。。已经整理好了。嘿，谢谢你的回复。我已经设法解决了。。。一切正常。。。看一看。。任何改进或投入都将不胜感激。嘿，谢谢你的回复。我已经设法解决了。。。一切正常。。。看一看。。如有任何改进或投入，将不胜感激。