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

Image With text With Black Background Overlay

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

Leave a Comment