I'm trying to do a thumbnail page with a hover transition that zooms and displays a description. EDIT: I do not want to use jquery.
Problem 1. The hovered div pushes the neighbor div out of alignment. All the thumbs should stay in nice neat rows.
Problem 2. The hovered div pushes the bottom of the container down.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
overflow: hidden;
transition: all 200ms ease-in;
transform: scale(1);
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
height: 300px;
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 150px;
width: 150px;
}<div class="container"><div class="tn-wrapper"><div class="thumb-box">
Thumb</div><div class="descr-box">
Description</div></div><div class="tn-wrapper"><div class="thumb-box">
Thumb</div><div class="descr-box">
Description</div></div></div>