CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
GriffinHeart
GriffinHeart

Reputation: 450

position elements over image

I'm trying to position some elements over an image while keeping the following behaviour:

What i've achieved so far: http://jsfiddle.net/wn6M9/14/

This at the moment doesn't work as you can see by the div background, nor is the text aligned with the bottom of the picture.

result so far

Upvotes: 0

Views: 63

Answers (2)

Albzi
Albzi

Reputation: 15609

Do you mean something like this?

JSFiddle

I changed the CSS to:

.masonry {
    position: relative;
}

.item {
    width: 20%;
    position: relative;
}

.item-image {
    width: 100%;
}

.item-text {
    background: pink;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin: auto;
    width:100%;
    height:20px;
}

.item-title {
    padding: 0px;
}

.item-right {
    padding: 0px;
}

@media(min-width:992px){
    .item-creator {
        float: right !important;   
    }
}

JSFiddle 2 - Pink bit at bottom of image

Upvotes: 1

Karan Tewari
Karan Tewari

Reputation: 508

maybe this is what you are looking for

.item-title {
border:0px solid black;
padding: 0px;
float:left;
}

.item-right {
padding: 0px;
border:0px solid black;
float:right;
}

Upvotes: 0

Related Questions