Thumbnail hover scaling within thumbnail size - css

Question

I am trying to get a scale effect when I hover over a thumb, as in this Codepen example (first thumb, the Lily effect):
http://codepen.io/intermedion/pen/BQVJEx
I modified the above example to remove the figure/figcaption, and I used a flexbox layout for the thumb grid, see this pen:
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);
}
I tried various options, including setting sizes on the thumbs, adding figure/figcaption - the thumbs scale, but over and beyond the thumbnail size, which is not what I want.
I am starting to suspect that it may be the flexbox layout that is causing the scaling beyond the rendered thumb size, but I am not sure.
Is there any way to do the scaling within the rendered thumb with a flexbox layout?

Answer 1

I think you forgot overflow:hidden for the div:
.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>