Ionic 4 Card Image Overlap

ion card label
ionic 4 image gallery
ionic 4 gestures
ionic 4 list example
ion-card height
ionic card image size
ionic image responsive
ion-card disabled

I am looking for a solution if it is possible on Ionic? I already used a z-index but nothing happened.

Overlap Image on Ionic Card Content

Html

<ion-card>
  <ion-card-content>
     <ion-img src="./assets/img/pizza-manager.png"></ion-img>
         </ion-card-content>
         <ion-card-header>
            sample
         </ion-card-header>
</ion-card>             

CSS

ion-card {
  position: relative;
  height:30vh;
  width: 50vw;
  z-index: -1;
}

ion-card-content {
  height: 70%;
  z-index: -1;
}

ion-img {
  height: 20vh;
  width: auto;
  z-index: 2;
  position: absolute;
  margin-top: -50px;
}

My Result:

Result

It looks like the overflow is being hidden.

I removed most of your code and just played with the overflow settings which got what you are looking for:

// overlapping-card.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>overlapping-card</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <br>
  <br>
  <br>
  <br>
  <ion-card>
    <ion-card-content>
      <ion-img src="./assets/pizza.png"></ion-img>
    </ion-card-content>
    <ion-card-header>
      sample
    </ion-card-header>
  </ion-card>
</ion-content>

// overlapping-card.page.scss

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

Note: without the height on ion-img I was getting some strange effects so you should be sure to set that.

Resize an avatar and have it top of an image - ionic-v3, 1) I would like the avatar to be a little bigger and overlap on the right with the picture. 2) … <ion-item-content> <h2 class="card-title"> Nine Inch Nails Live </​h2> <ion-avatar Unless there's something specific for ion element I'm not aware of. Let's try these steps and see how it goes: You can select ion-content directly in your CSS instead of creating another CSS class. I am assuming you need a background image for a page.

page.html

<ion-card>
   <ion-card-header>
      sample
   </ion-card-header>
</ion-card>   

<ion-img src="../../assets/images/feature-bootstrap.png"></ion-img>

page.scss

ion-card{
    position: relative;
    height:250px;
    width: 250px;

ion-card-content{
    height: 70%;
    z-index: -1;
  }
}
ion-img{
    width: 200px;
    position: absolute;
    top: 0;
    right: -6px;
}

Angular and Ionic Cards Images Example, Angular Cards demo with different image and picture placements: cover, full-​width, inset and thumbnails. With source code. For Angular 2/4/5/6/7/8/9 and Ionic  Angular Cards demo with different image and picture placements: cover, full-width, inset and thumbnails. With source code. For Angular 2/4/5/6/7/8/9 and Ionic 2/3/4/5.

Please try this code, this will help you to solve your issue.

ion-card.main-card{
  background: #D29034;
  border-radius: 4px 100px 10px 10px;
  max-width:500px;
  overflow: visible;
  margin-top: 80px;
}
.card-img{
  max-width:80px;
}
.card-main-content{
  background: #F3F0F1;
  border-radius: 4px 60px 10px 10px;
}
.card-amount{
  --background: transparent;
  --border-color: transparent;
  color: #fff;
}
.card-image-blk{
  --background: transparent;
  --border-color: transparent;
  margin-bottom: -30px;
  margin-top: -30px;
}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
  <ion-app>
    <ion-content>
      <ion-card class="main-card">
        <ion-card-content class="card-main-content">
          <ion-item class="card-image-blk">
          <img class="card-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Vector_cup_of_coffee.svg/1094px-Vector_cup_of_coffee.svg.png" slot="end" />
            </ion-item>
        <ion-card-header>
          <ion-card-title>Madison, WI</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
        </ion-card-content>
          </ion-card-content>
        <ion-card-content>
    <ion-item class="card-amount">
    <ion-label>Card Button Item 2</ion-label>
      <ion-icon name="walk" slot="end"></ion-icon>
  </ion-item>
  </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
 

image with overlay text on ion card? - css - html, Here's what it's like: sample Question is, no matter how I set the background color for the ion card in the bottom(with image descriptions), it keeps appearing  Cards are a standard piece of UI that serves as an entry point to more detailed information. A card can be a single component, but is often made up of some header, title, subtitle, and content. ion-card is broken up into several sub-components to reflect this. Please see ion-card-content, ion-card-header, ion-card-title, ion-card-subtitle.

Ionic - Cards, Ionic - Cards - Since mobile devices have smaller screen size, cards are one of the best elements for displaying information that will feel user friendly. class together with the item-body to get a good-looking windowed image inside your card. 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 Overlay for text in Ionic 3

Ionic Ion: Tinder Cards · GitHub, rel="stylesheet">. <script src="http://code.ionicframework.com/collide/0.0.4/​collide.js"></script> <figure class="item item-image">. <img ng-src="{{card.​image}}">. <div class="td-card__overlay td-card__overlay--dislike no-text">​Dislike</div>. Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards <!--t.4.5.4.0-->Ionic Docs

bug: ion-virtual-scroll overlapping items · Issue #18409 · ionic-team , image. Here is a video of it occurring: https://youtu.be/uu_R5L7KIOE The solution for me, for the time being, was to put the ion-card inside of an bug: ion-​virtual-scroll is overlapping on slow network connection #20342. Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the API Index for a complete list of each component and sub-component.