0

I've been trying for days now to overlap an image on top of a card in Ionic 6 but I've had no luck so far.

I'd want to achieve something like this, if possible

I have tried several methods that semeed to have worked with people that had the same problem, solutions such as playing around with the z-index or the overflow property but the problem persists in my case.

This is my html:

<ion-card>
    <ion-card-content>
       <ion-img src="./assets/img/placeholder.png"></ion-img>
           </ion-card-content>
           <ion-card-header>
              texttexttexttexttext
           </ion-card-header>
  </ion-card>

This is my .scss, taken from one of the solutions I had found on stackOverflow:

ion-card{
    height:50%;
    width: 75%;
    margin-left:12.5%;
    overflow: visible;
    margin-top:15%;
}
ion-card-content{
    height: 70%;
    overflow: visible;    
}
ion-img{
    height: 20vh;
    width: auto;
    margin-top: -75px;
}

this is how it looks

I'm new to Ionic so there's probably something really basic that is going right over my head so bear with me haha.

Thanks in advance for any help.

Guppy
  • 1
  • 1
  • 1
    Hello and welcome to StackOverflow, it is not really clear from the question which element you want to overlap with what and how, you should add to the question (using the edit link under the question) what you want to achieve exactly – Kaddath Mar 01 '23 at 09:49
  • Thanks for the help, I edited the question so hopefully now it's a bit clearer what I want to do – Guppy Mar 01 '23 at 09:51

0 Answers0