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.

result far

do mean this?

jsfiddle

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

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -