Как сделать так, чтобы тень коробки отображалась на следующем элементе контейнера?
Пожалуйста, смотрите этот код: http://codepen.io/Varin/pen/kkGgVd
<div class="container">
<div class="outside2">
<div class="inside2">
<span class="text"></span>
</div>
</div>
<div class="outside2">
<div class="inside2">
<span class="text"></span>
</div>
</div>
<div class="outside2">
<div class="inside2">
<span class="text"></span>
</div>
</div>
</div>
И CSS
$color1 : rgba(123,223,12,0.66);
$color2 : rgba(23,43,122,0.66);
body {
box-sizing: border-box;
background-color: #222222;
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
//height: 100vh;
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
}
.container {
display:flex;
}
.text:after {
content: 'Some info about the product and features, the history of the company lorem ipsum and so on.';
}
.outside2 {
margin: 10px;
box-sizing: border-box;
padding: 10px;
display:flex;
justify-content: center;
align-items: center;
text-align: center;
background: url(https://image.freepik.com/free-vector/wavy-letter-v-logo-in-abstract-style_1017-1976.jpg);
background-position: center center;
background-size: cover;
height: 200px;
width: 200px;
border: solid 0px rgba(0,0,0,0.4);
transition-duration: 0.5s;
&:hover {
box-shadow: inset 0px 0px 101px 100px $color1, 0px 0px 201px 56px $color1;
.text {
opacity:1;
transition-delay: 0.2s;
}
}
.text {
color: #fff;
opacity:0;
transition-duration: 0.5s;
transition-delay: 0.1s;
}
}
В последней строке, где при наведении мыши отображаются оба типа теней бокса, тень 1-го элемента находится под вторым элементом. Только тень 3-го элемента появляется над 2-м элементом.
Я мог бы поиграть с Z-индексом, но есть ли способ убедиться, что все бокс-тени всегда находятся поверх всего остального? Это как-то связано с flexbox?
1 ответ:
Просто добавьте к своему блоку
position: relative
при наведении и дайте ему самый большой z-индекс. jsfiddle link