Within a div that is positioned relatively, there is another div positioned absolutely. Despite setting overflow:hidden and border-radius on the main div, the inner div's edges are not contained within the main one, indicating that the overflow property is not functioning as expected.
For a live preview and full code sample, click here: http://jsfiddle.net/sYv78
<div class="gridElement">
<img alt="image" src=
"https://pbs.twimg.com/profile_images/441318694942031872/I2cc6yMB.jpeg">
<div class="animate">
<p>Brief Description</p>
</div><a href=""></a>
</div>
.frames img, .frame {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/*Grid Systems*/
.grids {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
.grids.columns2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.grids.columns4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.grids .gridElement {
margin-bottom: 10px;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.grids .gridElement:last-child {
margin-bottom: 0;
}
.grids .gridElement img {
min-width: 100%;
}
.
.
. (The rest of the CSS code is unchanged)
.
.
}