Could you take a look at the link provided below (just widen the result window a bit) and let me know why there are white lines on top and on the sides of the boxes when the hover overlay is fully loaded? Even when I use a background image for those divs, the problem still persists (regardless if it's an SVG or PNG file).
.link-picture-small {
position: relative;
display: block;
margin: auto;
width: 100%;
height: 17.5em;
background: #FFFFFF;§
background-size: 100%;
border-radius: 0.625em;
}
.overlay {
position: absolute;
display: table;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
width: 100%;
height: 100%;
background: #212121;
border-radius: 0.625em;
opacity: 0;
-webkit-transition: all 1.15s ease-out;
-moz-transition: all 1.15s ease-out;
-moz-transition: all 1.15s ease-out;
transition: all 1.15s ease-out;
}
.overlay p {
display: table-cell;
vertical-align: middle;
}
.link-picture-small:hover .overlay {
opacity: 0.99;
}
I'm facing this issue on Chrome (latest version). Interestingly, Firefox and Safari don't have this problem. Do you know any smart techniques to fix it in Google's browser?