How to have dynamic overlays over images in angular 2?

Question

How to have an image in angular 2 like the one above, taken from facebook marketplace. The one I need is the black on, bottom-left.

Answer 1

Create a wrapper div around the image that has a position set to relative, and then create the overlay as a child div, with position set to absolute.

That will position it relative to the container

Here is an example:

.img-container {
  position: relative;
}

img {
    width: 500px;
}

.overlay {
    display: inline-block;
    color: white;
    background-color: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 10%;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

<div class="img-container">
  <img src="http://greenwoodhypno.co.uk/wp-content/uploads/2014/09/test-image.png" />

  <div class="overlay">
     $75
  </div>
</div>