将图像的上半部分推出卡

Question

我正在尝试在Ionic中创建以下设计：

目前，我正在专门尝试将图像的上半部分推过卡的顶部，并使图像的宽度约为卡的宽度的80％。

如何将图像的上半部分推出存储卡？

我创建了一个StackBlitz for this issue。

编辑： I have been able to make the image protrude the top half of the card，但是图像与文本和其他图像重叠。如何将卡向下推到上半部包含图像的下半部而下半部包含其他文本，图像等的地方？

这是我的CSS：

.card {
  margin-left: 30px;
  margin-right: 30px;
  width: auto;
  border-radius: 8px;
  position: relative;
  display: block;
  margin-top: 100px;
  overflow: visible;

  div {
    position: absolute;
    top: -95px;
    width: 100%;
    text-align: center;
  }


  img:not(.castImg) {
    width: 80%;
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    display: block;
    margin: -100px auto 0;
  }
}

Answer 1

查看代码here在home.scss文件中进行了2处修改...播放17％，这是两个地方的任意数字

.card {
      margin-left: 30px;
      margin-right: 30px;
      width: auto;
      border-radius: 8px;
      margin-top: 17%; /* Change 1a */
      overflow: visible; /* Change 1b */
      img:not(.castImg) {
        width: 80%;
        margin: auto;
        margin-top: -17%; /* Change 2 */
        border-radius: 8px;

        -webkit-box-shadow: 0 8px 6px -6px black;
        -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;
      }
      ion-card-title {
        font-weight: bold;
        text-align: center;
      }
    }