Bootstrap 3叠加字幕未正确对齐

Question

I have created a pintrest style grid in bootstrap and in that i want to display overlay caption text on top right corner and on bottom side

But as you can see in the demo here that my top right corner label is not aligned properly and same for bottom text as well

Even when i write text in multiline it doesnt fit in well. I want the miltiline text to be display like this below image

Also wants to fit the grid according to image,right now it gives some extra width after the image width.

So what css property should i adjust here?

Answer 1

CSS

.row {
    -moz-column-width: 18em;
    -webkit-column-width: 18em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;
}
.item {
    display: inline-block;
    width: 100%;
}
.well {
    position:relative;
    display: block;
    padding: 0;
}
.well span {
    position: absolute;
    right: 0;
    top: 0;
    padding:1%;
    color: #fff;
    background:rgba(0, 0, 0, 0.50);
}
.well h4 {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding:1%;
    color: #fff;
    background:rgba(0, 0, 0, 0.50);
    width: 100%;
    padding: 15px;
}

For a full width, cover image on each item, add width:100% to the <img/> elements.

.well img {
    width:100%;
}

Demo: https://jsfiddle.net/9dz3xxe9/1/