縮放圖像在鼠標懸停在css

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