Alright, so I was changing stuff with CSS with thumbs and I really liked the way it looked, but there's a problem the I (for information) seems to break when I put the caption at the top, is there a way to fix this?

Code is:

figure.thumb.show-info-icon {
    border: 2px solid #000000;
    background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 6%, rgba(0, 0, 0, 0.2) 10%, transparent 10%, transparent 15%);
}
figure.thumb.show-info-icon figcaption.thumbcaption {
    border: 2px solid #000000;
    border-radius: 5px 5px 0 0;
    background-color: #000000;
	caption-side: top
}
.thumb.show-info-icon .info-icon {
    border-radius: 10px 0 0 0;
    background-color: #00000066;
}