css - 缩略图悬停缩放缩略图大小

Question

当我将鼠标悬停在拇指上时，我试图获得缩放效果，如这个 Codepen 示例(第一个拇指，百合效果):

http://codepen.io/intermedion/pen/BQVJEx

我修改了上面的示例以删除图形/图形标题，并且我为拇指网格使用了 flexbox 布局，请看这支笔:

http://codepen.io/intermedion/pen/dOKrWQ?editors=1100

<!-- HTML -->
<div class="wrap">
  <div class="row">
    <div>
      <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">

      </a>
    </div>

    <div>
      <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
      </a>
    </div>
  </div>
</div>  

/* CSS */ 
.row {
  display: flex;
  flex-flow: row wrap;
  padding: 0 5px;
  font-size: 0;
}

.row div {
  flex: auto;
  width: 160px;
  margin: 6px 12px;
}

.row div img {
  width: 100%;
  height: auto;
}


/*** EFFECTS ***/
.row img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;  
}

.row img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;

}

.row:hover img {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

我尝试了各种选项，包括在拇指上设置大小，添加图形/无花果标题 - 拇指比例，但超过缩略图大小，这不是我想要的。

我开始怀疑可能是 flexbox 布局导致缩放超出渲染的拇指大小，但我不确定。

有没有什么方法可以使用 flexbox 布局在渲染的缩略图中进行缩放？

Answer 1

我想你忘记了 div 的 overflow:hidden:

.row div {
  flex: auto;
  width: 160px;
  margin: 6px 12px;
  overflow: hidden; 
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

ul {
  list-style-type: none;
}

a:link { text-decoration: none; } 
a:visited { text-decoration: none; } 
a:hover { text-decoration: none;}


html {
  background: #2b303b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*** LAYOUT ***/

.wrap {
  max-width: 660px;
  margin: 1.5em auto 1em auto;
  padding: 10px 10px;
  background: #2e333f;
  background-color: rgba(32, 38, 52, 0.6);
  background: #242B3A;
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  color: rgba(127, 133, 147, 0.8);
  border-radius: 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
}

/*** GRID ***/

.row {
  display: flex;
  flex-flow: row wrap;
  padding: 0 5px;
  font-size: 0;
}

.row div {
  flex: auto;
  width: 160px;
  margin: 6px 12px;
  overflow: hidden;
}

.row div img {
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/*** EFFECTS ***/
.row img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;  
}

.row img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  
}

.row div:hover img {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

/*** CAPTIONS ***/

/*
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 300px;
  max-width: 480px;
  max-height: 360px;
  width: 48%;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}
*/
/*
.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}
*/

<div class="wrap">
  <div class="row">
    <div>
      <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
        
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
       
      </a>
    </div>
    
    <div>
      <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
      </a>
    </div>
  </div>
</div>