WONDROUS
Silver Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как в данном коде сделать плавный показ тени. Если наведение без before/after, то всё работает, а с ними нет.
Код: .box {
margin-bottom: 45px;
position: relative;
background-color: #FFFFFF;
transition: all 0.3s ease;
}
.box:hover:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 180px;
height: 55px;
z-index: -1;
background: rgba(119, 119, 119, 1.00);
box-shadow: -20px 30px 15px rgba(119, 119, 119, 1.00);
transform: skew(5deg,-10deg) translate(40px,-15px);
}
.box:hover:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 180px;
height: 55px;
z-index: -1;
background: rgba(119, 119, 119, 1.00);
box-shadow: 20px 30px 15px rgba(119, 119, 119, 1.00);
transform: skew(-5deg,10deg) translate(-40px,-15px);
} |
|
