Creating an overflowing box-shadow in a list of cards

Ionic Framework Ionic React
1

Hi,

I am trying to get a box-shadow underneath a card as soon as I hover over it. However, after it shows the box-shadow, it is cut-off by the next card including a little boundary around this next card. Ideally, I only want the second card to appear on top of the box-shadow, not the boundary around the second card. The only way I can achieve this, is by removing the “position: relative” in the element inspector on the ionPage level and on a :host constructed stylesheet. This is of course not a durable option. Does anyone have experience with overflows & box-shadows who could help me out? Everything I try to do with z-indexes gets overridden by the position statements at parent tag.

To clearify, here is a screenshot of the issue that is happening. In the screenshot, the hover state & shadow is implemented on the first card.

wrongboxshadow
wrongboxshadow2976×680 87 KB

As you can see, there is a slight square around the orange card that is below the “hovered” card.

correct
correct2976×680 203 KB

After removing some position css statements in the element inspector, this is the correct state that I’m looking for. The only thing that interrupts the box shadow is the second card itself. I am looking for a way to force the second state in my css files & classes.

I have a simplified version of my issue in this code sandbox:

1 Like
2

You are very beautiful in this post

3

It is a nice post.Thank you.

4

it works as expected if you remove the IonItem that wraps the IonCard in your list.

Your code shows this:

 <IonPage>
      <IonContent>
        <IonList>
          <IonItem className="topic-item nested-card">
            <IonCard className="card"></IonCard>
          </IonItem>
          <IonItem className="topic-item nested-card">
            <IonCard className="card"></IonCard>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>

But it should be this:

 <IonPage>
      <IonContent>
        <IonList>
            <IonCard className="card"></IonCard>
            <IonCard className="card"></IonCard>
        </IonList>
      </IonContent>
    </IonPage>

For more information, this post was very helpful: CSS position property: relative, absolute, static, fixed, sticky - Coder Coder