画像のズーム、画像を保持し、ホバー上だから、

Question

.featured-items__image-container { 
 
    height: 250px; 
 
    overflow: hidden; 
 
    width: 370px; 
 
} 
 

 
.featured-items__item-image { 
 
    @include animate(all, 500ms); 
 
    cursor: pointer; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.featured-items__item-image:hover { 
 
    height: 120%; 
 
    width: 120%; 
 
}

<div class="featured-items__image-container"> 
 
    <img class="featured-items__item-image" src="https://unsplash.it/370/250"/> 
 
</div>

を中心に、私は、幅と高さの両方に20％を追加しています。どちらが完璧に動作しますか。しかし、イメージは中心にない、それは私が苦労しているものです。ズームすると、画像がちょうど右に「成長」します。任意のヒント？

Answer 1

この試してみてください：あなたはまた、画像への相対的な位置関係を適用し、左を設定し、それぞれ-10％、-10％のトップ、これがある可能性があり

.featured-items__image-container { 
 
    height: 250px; 
 
    overflow: hidden; 
 
    width: 370px; 
 
} 
 

 
.featured-items__item-image { 
 
    @include animate(all, 500ms); 
 
    cursor: pointer; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.featured-items__item-image:hover { 
 
    height: 120%; 
 
    width: 120%; 
 
    margin-left:-10%; 
 
    margin-top:-10%; 
 
}

<div class="featured-items__image-container"> 
 
    <img class="featured-items__item-image" src="https://unsplash.it/370/250"/> 
 
</div>

Answer 2

がシフトしますそれがどこから来たのかを確認し、所望の出力を達成する。

.featured-items__item-image:hover { 
    height: 120%; 
    width: 120%; 
    position:relative; 
    left:-10%; 
    top:-10%; 
}