マウスのホバーで画像を拡大する

Question

私のコードで何が起こっているのか分かりません。すべて正常に動作しますが、主な問題は次のイメージが次の行に移動していることです。私はイメージを次の行にシフトしたくありません。画像がその行に残るような解決策はありますか？私は<table>タグを使いたくありません。 お願いします...！ここで

は私のコードです：ここで

img { 
 
    max-width: 100%; 
 
    display: inline-block; 
 
} 
 
.imz { 
 
    top: 50%; 
 
    left: 100%; 
 
    width: 150px; 
 
    height: 150px; 
 
    -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */ 
 
    -moz-transform: translate(-50%,-50%); /* Firefox */ 
 
    -ms-transform: translate(-50%,-50%);  /* IE 9 */ 
 
    -o-transform: translate(-50%,-50%);  /* Opera */ 
 
    transform: translate(-50%,-50%); 
 
} 
 
.emz { 
 
    width: 100%; 
 
    height: 100%;  
 
} 
 
.emz img { 
 
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */ 
 
    -moz-transition: all 0.5s ease; /* Firefox */ 
 
    -o-transition: all 0.5s ease;  /* IE 9 */ 
 
    -ms-transition: all 0.5s ease;  /* Opera */ 
 
    transition: all 0.5s ease; 
 
} 
 
.emz:hover img { 
 
    -webkit-transform:scale(1.05); /* Safari and Chrome */ 
 
    -moz-transform:scale(1.05); /* Firefox */ 
 
    -ms-transform:scale(1.05);  /* IE 9 */ 
 
    -o-transform:scale(1.05);  /* Opera */ 
 
    transform:scale(1.05); 
 
}

<div class="imz"> 
 
    <div class="emz"> 
 
     <img src="https://www.w3schools.com/css/img_fjords.jpg" height="150px"> 
 
    </div> 
 
</div>

Answer 1

が更新答えは、あなただけのoverflow:hiddenを追加し、

HTML

いくつかの余分なスタイルを削除する必要があります

<div class="imz"> 
    <div class="emz"> 
    <img src="https://www.w3schools.com/css/img_fjords.jpg" height="150px"> 
    </div> 
</div> 

CSS

img { 
max-width: 100%; 
display: inline-block; 
} 
.imz { 
    top: 50%; 
    left: 100%; 
    width: 150px; 
    height: 150px; 
} 
.emz { 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
} 
.emz img { 
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */ 
    -moz-transition: all 0.5s ease; /* Firefox */ 
    -o-transition: all 0.5s ease;  /* IE 9 */ 
    -ms-transition: all 0.5s ease;  /* Opera */ 
    transition: all 0.5s ease; 
} 
.emz:hover img { 
-webkit-transform:scale(1.05); /* Safari and Chrome */ 
-moz-transform:scale(1.05); /* Firefox */ 
-ms-transform:scale(1.05);  /* IE 9 */ 
-o-transform:scale(1.05);  /* Opera */ 
transform:scale(1.05); 
}