Ok, I have the following code: https://jsfiddle.net/7u1aLxaw/
So the issue is that when you hover over an image, it shows an overlay with a name specific to that image. But if the name is longer than the image width, the image immediately to the right is pushed away and the overlay isn't centered on the image. It expands just to the right, not on both sides.
I can't work out how to center the overlay and avoid it effecting divs on either side of it.
*I tried using display: none, but I want to preserve the CSS3 transitions. Using display: none to completely remove the element removes the CSS3 transition.
Any ideas?
Change your .item_overlay style to:
.item_overlay {
height: auto;
width: auto;
margin: 0 auto;
margin-top: -95px;
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Making the position absolute ignores the other elements position, then setting a negative top margin moves it back to the top. http://jsfiddle.net/q8SER/2/