html - position elements over image -
i'm trying position elements on image while keeping following behaviour:
- when in mobile stop floating
"muuh"
text right - keep text aligned bottom of image
- the
.item
div
size should not bigger image
what i've achieved far: http://jsfiddle.net/wn6m9/14/
this @ moment doesn't work can see div
background, nor text aligned bottom of picture.
do mean this?
i changed 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 @ bottom of image
Comments
Post a Comment