Overlap with top image CSS

Question

I need to create ion-card as shown below. I have tried many ways. But no luck yet. Any clue?

Note: It has 2 images. top one and small book cover.

Here is the sample of stackblitz

This is what I need:

.html

<ion-card class="card-margin">
    <img class="contentPicture" [src]="data?.image" />

    <ion-card-content>
        <ion-item class="book-cover">
            <ion-thumbnail item-left class="thumbnail">
                <img [src]="data?.image2">
            </ion-thumbnail>
        </ion-item>
        <ion-item class="book-details">
            <h2>From book:
                <span>My book</span>
            </h2>
            <h2>Publisher:
                <span>My publisher</span>
            </h2>
        </ion-item>
    </ion-card-content>
</ion-card>

https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html — Mohan Gopi, Nov 21 '17 at 06:13
yes try once with the above stack link it will work even with ion-card — Mohan Gopi, Nov 21 '17 at 06:16
Hope you'll simulate it on above stackblitz. It is not that much easy with `ion-card` for me.Hope you'll try that and let me know. @MohanGopi — Sampath, Nov 21 '17 at 06:16

Suraj Rao · Accepted Answer · 2017-11-21T08:16:51.683

2

My attempt can be found here.

Set styles in .book-cover class:

.book-cover{
  top: -50px;
  z-index: 2;
  background: transparent;
}

Note: You may have to edit the image's alpha to remove the whitespace in the image itself if you have any.

For the name section, I suggest using ion-row and ion-col instead of ion-item as the latter takes up the entire row.

<ion-card-content>
    <ion-grid>
      <ion-row>
            <ion-col col-2 class="book-cover">
                <ion-thumbnail item-left class="thumbnail">
                    <img [src]="data?.image2">
                </ion-thumbnail>
            </ion-col>
            <ion-col class="book-details">
                <h2>From book:
                    <span>My book</span>
                </h2>
                <h2>Publisher:
                    <span>My publisher</span>
                </h2>
            </ion-col>
      </ion-row>
    <ion-grid>
    </ion-card-content>

edited Nov 21 '17 at 08:16

answered Nov 21 '17 at 06:29

Suraj Rao

29,388
11
94
103

OK, Can I have help for the `book-details` section too? – Sampath Nov 21 '17 at 06:31
updating my answer – Suraj Rao Nov 21 '17 at 06:32
@Sampath above will work but image thumbnail needs to be resized based on responsiveness.. – Suraj Rao Nov 21 '17 at 06:39
That is it. Thanks a lot :) The trick was `ion-row`. One question: Is that OK to use `ion-row` without `ion-grid`? – Sampath Nov 21 '17 at 08:13
Hmmm.. OK. Thanks :) – Sampath Nov 21 '17 at 08:19
1

@Sampath `ion-grid` is only used to add some padding to the rows, or if you need to wrap the rows inside of a container in order to apply some CSS style rules to the wrapper. But that's all, most of the time I've used `ion-row`'s without the `ion-grid` wrapper – sebaferreras Nov 21 '17 at 21:57
1

Oh.. That is great info. Thanks a lot. After a long time :) @sebaferreras – Sampath Nov 22 '17 at 00:20

score 0 · Answer 2 · answered Nov 21 '17 at 06:39

Use position: relative to the main image and position: absolute to the book image here I did sample code

.bg-image {
  position: relative;
  
}
.book {
  position: absolute;
  top: 250px;
}
.text {
  position: absolute;
  left: 180px;
  
}

<div class="bg-image">
<img src="https://i.imgur.com/U4Oadyu.png">
</div>
<div class="book">
<img src="https://i.imgur.com/r7uK5St.jpg">
</div>
<div class="text">
<p>Text Here</p>
</div>

Overlap with top image CSS

2 Answers2