Shadow with CSS "after" pseudo-elements

Question

I wish like to place a curved shadow under my DIV-Container if i hover on the DIV. Unfortunately the shadow is above my box and not below. Any suggestions?

This is my CSS:

.appointment {
    position: relative;
    z-index: 1000;
    padding: 5px;
    border: 1px solid #BBBBBB;
    cursor: pointer;
    transition: all 0.5s;
    background: #FFFFFF;
}

.appointment:hover {
    transform: scale(1.1);
}

.appointment:hover:after {
    content:'';
    position: absolute;
    z-index: -1;
    top: 20px;
    width: 100px;
    height: 45px;
    background: #000000;
    transform: rotate(-5deg);
}

HTML:

<div class="appointment">
    <div class="desc">
        <div class="app-date">07.10.2014</div>
        <div class="app-location">Bamberg, Bayern</div>
    </div>
</div>
<div class="appointment" >
    <div class="desc">
        <div class="app-date">08.10.2014</div>
        <div class="app-location">Hamburg, Hamburg</div>
    </div>
</div>

JSFiddle

It should look like this: Curved Shadow

Hope this Fiddle can explain it: http://jsfiddle.net/yw035wz8/3/ — alexP, Sep 03 '14 at 11:59
This would be easier done by dropping the `::after` and just using `hover` and `box-shadow`. — Remy Sheppard, Sep 03 '14 at 12:02
Put a z-index on your `.desc` element instead of on `.appointment`. — CBroe, Sep 03 '14 at 12:03
The problem is: transform: scale(1.1); on appointment:hover, it work's if it get's removed. — TheFrozenOne, Sep 03 '14 at 12:05
But i need curved shadow @RemySheppard. That's not possible with box-shadow. — alexP, Sep 03 '14 at 12:05
@alexP - you mean like [these](http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)? Because it is possible. — Remy Sheppard, Sep 03 '14 at 12:06
It now seems this is a duplicate of http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d — o--oOoOoO--o, Sep 03 '14 at 12:07
http://stackoverflow.com/a/20852489/2328888 that answer might help you. — TheFrozenOne, Sep 03 '14 at 12:07
So is @alexP in his fiddle? Also: What about guy who suggested z-index? Let's give that some ups. — Remy Sheppard, Sep 03 '14 at 12:11

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

According to this answer: z-index canceled by transform you need to change your markup.

  <div class="appointment-wrapper">
    <div class="appointment">
        <div class="desc">
            <div class="app-date">07.10.2014</div>
            <div class="app-location">Bamberg, Bayern</div>
        </div>
    </div>
 </div>

and then use transform: scale(1.1) on the appointment-wrapper.

.appointment-wrapper:hover
{
  transform: scale(1.1);
}

This way .appointment and it's pseudo elements share the same stacking context.

EDIT: Be aware that the pseudo elements get transformed aswell.

edited May 23 '17 at 12:05

Community

1
1

answered Sep 03 '14 at 12:14

TheFrozenOne

1,695
9
19

Just a point of contention: this doesn't give a curve. It just rotates a straight edge. – TylerH Feb 10 '15 at 16:50
@TylerH Yeah, you sure are right, I just took alexPs approach and tried to fix it. – TheFrozenOne Feb 15 '15 at 12:32

Shadow with CSS "after" pseudo-elements

1 Answers1