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>
It should look like this:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.