Angular Material - Element overlay on images (in md-card)

Question

I am trying to reproduce the following using angular material (that is to say, add dynamic text over an image) : text over image

I would like to use md-cards because there are convenient.

My problem is that I cannot manage to make the text overlay on the image; the text is always before or after the image.

Is playing with the position in CSS the only solution?

Thanks a lot!

Answer 1

You can use a wrapper. Something like this:

HTML:

<div class="md-card-wrapper" ng-app="myapp">
  <md-card>
    <img src="http://i.imgur.com/OiqxTL1.jpg">
  </md-card>
  <span>Text over image</span>
</div>

CSS:

.md-card-wrapper {
  position: relative;
    width: 40%;
  span {
      position: absolute;
      top: 20%;
      right: 20%;
      color: white;
      font-size: 34px;
    }
}

Or you can play with my example here: http://codepen.io/anon/pen/xEpvOv