Images scale on hover but very glitchy and not positioning well

[pr3tty_hat3_machin3]

HTML:

CSS:
img.thumbnail {
width: 30%;
float: left;
margin: 1.6666%;
}

img.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}

HALP Please!!!

[Atelierbram]

Consider display: flexbox on the gallery list to avoid overflow and clearing issues. One can wrap those images in a link-tag with position: relative. When having the thumbnail absolute positioned, one can than for example transition the values for max-width from 100% to 120%, and adept the values for left and top on those thumbnail images (on hovering those wrapper links) as well. Gives smooth transitions with minimal code.

.gallery_link {
 text-decoration: none;
 display: flex;
 position: relative;
 height: 0;
 padding-bottom: 100%; 
}

.thumbnail {
 position: absolute;
 top:0;right:0;bottom:0;left:0;
 transition: all .3s;
}

.gallery_link:hover .thumbnail {
 max-width: 120%;
 left: -10%;
 top: -10%;
 z-index: 1; 
}

http://codepen.io/atelierbram/pen/XKYxgZ

[Author]

Posts