的JavaScript淡出/變焦效果..什麼我做錯了

Question

我想第二層背景顏色褪色（不透明），並在畫面DIV2規模..試圖像http://fantasy.co/work

這裏創造的東西是jsfiddle link

因爲我沒有足夠的積分，我不能張貼整個代碼...請跟隨鏈接，並建議我應該做的

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

您worknig下面的例子：

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

<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>