Hey guys, I've created a cool interactive design with six boxes that increase in font size when hovered over. However, this causes the boxes to move around, as you can see in my example. Any suggestions on how to fix this issue?
Another thing I noticed is that the border size appears to be thicker where two boxes meet. Is there a way to make the touching sides overlap, without using negative margins (which could get messy when resizing the screen)?
Thanks in advance for any help!
#main-content a {
color: #000;
border: #000 solid 2px;
display: table-cell;
text-align: center;
vertical-align: middle;
text-decoration: none;
-webkit-transition: font-size ease 3s, background-color ease 0.7s;
-moz-transition: font-size ease 3s, background-color ease 0.7s;
-o-transition: font-size ease 3s, background-color ease 0.7s;
transition: font-size ease 3s, background-color ease 0.7s;
}