Question

我希望第二层背景颜色淡化（不透明度）并在图片div2中缩放..尝试创建类似http://fantasy.co/work

的内容

我无法发布整个代码，因为我没有足够的分数...请点击链接并建议应该做什么

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);
    });
});

Answer 1

在解决方案Fiddler

中使用此逻辑

    div {
        height: 200px;
        width: 200px;
        background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
        background-size: 100% 100%;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
        background-position: center center;
    }
    
    div:hover {
        background-size: 150% 150%;
    }

<div></div>

Answer 2

您可以直接使用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;
}

在你的工作范例下面：

＆＃13;

.div1 {
  position: relative;
  width: 600px;
  height: 400px;
  background-color: red;
  z-index: 99;
}

.div2 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.div2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.div3 {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
}

.image-container {
  justify-content: center;
  height: 100%;
  width: 100%;
  align-items: center;
  display: flex;
}

.image-container img {
  width: 125px !important;
  margin: auto;
  position: relative;
  height: auto;
  z-index: 40;
}



.div1:hover .div3 img{
  transform: scale(1.25);
}

.div1:hover .div2 img{
  opacity: 0.5;
}

.div3 img {
   transition: transform 0.3s ease-in;
}
.div2 img {
   transition: opacity 0.3s ease-in;
}

＆＃13;

<div class="div1">
  <div class="div2">
    <img src="https://wallpaperscraft.com/image/absolute_vodka_collection_alcohol_drinks_20440_1920x1080.jpg" />
  </div>
  <div class="div3">
    <div class="image-container">
      <img src="https://ez.no/var/ezflow_site/storage/images/media/images/symfony-2.3-lts-in-ez-publish-platform-5.2/390464-1-eng-GB/Symfony-2.3-LTS-in-eZ-Publish-Platform-5.2_fancybox.png" />
    </div>
  </div>

</div>

＆＃13;

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

2 个答案: