How to Achieve Image Overlay for text in Ionic 3

Issue

I am using Ionic 3 and i want to achieve the following effect mention in the image on the image card component in Ionic 3

Solution

By using ion-card,

<ion-content class="has-header">
  <ion-card class="myCard">
    <img src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"/>
    <div class="myOverlay">
       <div class="card-title">San Francisco</div>
       <div class="card-subtitle">72 Listings</div>
    </div>
  </ion-card>
</ion-content>

and change CSS to

img{
  width:100%;
  height:100%;
}

.myCard{
  position:relative;
}

.myOverlay{
    width: 100%;
    height: 60px;
    position: absolute;
    z-index: 99;
    bottom: 0px;
    opacity: 0.5;
    background: #000;
    color: #fff;
}

Answered By - Veena K. Suresh