背景画像はクロームで

Question

CSSトランジションは、画像ホバー上のクロムに動作していない、JSFiddle例を確認してください

HTML

<div class="screenThum"> 
    <a href="#" class="portfolio" style="background-image:url(http://toffeeglobal.com/images/mockup1.png);"></a> 
</div> 

CSS

.screenThum .portfolio{ 
    width:350px; 
    display:block; 
    height:100%; 
    background-size:100%; 
    background-repeat:no-repeat; 
    height:250px; 
    position:relative; 
    opacity:0.4; 
    -webkit-transition: all .8s ease-in-out; 
    -moz-transition: all .8s ease-in-out; 
    -ms-transition: all .8s ease-in-out; 
    -o-transition: all .8s ease-in-out; 
    transition: all .8s ease-in-out; 
} 

.screenThum .portfolio:hover{ 
    opacity:0.9; 
    background-size:120%; 
} 

私は以前のSOの回答で試したが、私のコードではうまくいきませんでした。 どうしましたか？あなたはそれに慣れている場合

おかげ

Answer 1

は、あなたは同じ効果を得るためにtransform:scale を使用することができます。 編集：隠された：@Alexandre Beaudet

.screenThum{ 
 
    overflow: hidden; 
 
    width: 350px; 
 
    height: 250px; 
 
} 
 
.screenThum .portfolio{ 
 
    width:350px; 
 
    display:block; 
 
    height:100%; 
 
    background-size:100%; 
 
    background-repeat:no-repeat; 
 
    height:250px; 
 
    position:relative; 
 
    opacity:0.4; 
 
    -webkit-transition: all .8s ease-in-out; 
 
    -moz-transition: all .8s ease-in-out; 
 
    -ms-transition: all .8s ease-in-out; 
 
    -o-transition: all .8s ease-in-out; 
 
    transition: all .8s ease-in-out;} 
 

 
.screenThum .portfolio:hover{ 
 
    opacity:0.9; 
 
    -moz-transform: scale(1.2,1.2); 
 
    -webkit-transform: scale(1.2,1.2); 
 
    transform: scale(1.2,1.2); 
 
    }

<div class="screenThum"><a href="#" class="portfolio" style="background-image:url(http://toffeeglobal.com/images/mockup1.png);"></a></div>

Answer 2

の参照を取ることscreenThump幅に&オーバーフローを設定するようにしてください。次に、transform：scale（x）プロパティを使用します。この方法でズーム効果が得られ、画像がコンテナの幅から外れることはありません。

.screenThum { 
    overflow:hidden; 
    width: 350px; 
} 
.screenThum .portfolio{ 
    width:350px; 
    display:block; 
    height:100%; 
    background-size:100%; 
    background-repeat:no-repeat; 
    height:250px; 
    position:relative; 
    opacity:0.4; 
    -webkit-transition: all .8s ease-in-out; 
    -moz-transition: all .8s ease-in-out; 
    -ms-transition: all .8s ease-in-out; 
    -o-transition: all .8s ease-in-out; 
    transition: all .8s ease-in-out; 
} 

.screenThum .portfolio:hover{ 
    opacity:0.9; 
    transform: scale(3); 
}