Overflow:Hidden 不适用于 Transition Scale

Question

我正在尝试放大我的缩略图，但不让它超出 300px x 300px 区域。我已经阅读了此处的问题，但仍然无法正常工作。

这是它的样子： http://jsbin.com/nuduciyaja/1/edit?html,css,output

<body>
    <div class=flexContainer>
        <div class="images">
            <img src="http://via.placeholder.com/300x300"/>
        </div>
        <div class="images">
            <img src="http://via.placeholder.com/300x300"/>
        </div>

CSS:

.flexContainer {
    display: flex;
    flex-wrap: wrap;
    width: 1032px;
    margin: auto;
    background-color: DodgerBlue;
    overflow: hidden;
 }

.images {
    margin: 15px;
    width: 300px;
    height: 300px;

}

.flexContainer img {
    border: 5px black solid;
}

这就是我想要的样子： http://jsbin.com/hunikaruxu/1/edit?html,css,output

Answer 1

您必须更改一些 html 结构和 css 如下片段

/*=======================================
  GALLERY SECTION ANIMATION
  =======================================*/

.flexContainer {
 display: flex;
 flex-wrap: wrap;
  width: 1032px;
 margin: auto;
 background-color: DodgerBlue;
  overflow: hidden;
}

.images {
  margin: 15px;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 5px black solid;
}
/* ================================= 
  Photo Overlay Transitions
==================================== */

img {
    transition: transform .5s;
 transform-origin: 50% 50%;
}

img:hover {
    transform: scale(1.1);
}

  <div class="photoContainer">
  <div class=flexContainer>
      <div class="images">
        <img src="http://via.placeholder.com/300x300"/>
      </div>
      <div class="images">
        <img  src="http://via.placeholder.com/300x300"/>
      </div>
      <div class="images">
        <img src="http://via.placeholder.com/300x300"/>
      </div>
      <div class="images">
        <img src="http://via.placeholder.com/300x300"/>
      </div>
  </div>
  </div>

Overflow:Hidden 不适用于 Transition Scale

Overflow:Hidden not working on Transition Scale

css

overflow

flexbox

css-transforms