鼠标悬停在css中缩放图像答案

【问题标题】：zoom image on mouse hover in css鼠标悬停在css中缩放图像
【发布时间】：2017-08-28 08:20:50
【问题描述】：

我不明白我的代码发生了什么。一切正常，但主要问题是下一个图像正在转移到下一行。我不想将图像移到下一行。是否有任何解决方案使图像保留在该行中。我不想使用任何<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>

【问题讨论】：

添加 .imz { 溢出：隐藏； }，这样可以防止图片跳出。

标签： html css mouseover zooming

【解决方案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);
}

【讨论】：