3

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

2 Answers 2

14

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;
}
1
1

by using CSS ?

<div class="img-container">
 <img src="wolf.png">
 <div class="img-description"></div>
</div>

.img-container {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 350px;
}

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

.img-description {
  position: absolute;
  bottom: 0;
  height: 100px;
  widht: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  padding: 20px;
}

I guess it could works... Have fun :)

Not the answer you're looking for? Browse other questions tagged or ask your own question.