См. этот код: 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;
}
}
В последней строке, где при наведении отображаются тени обоих типов, тень первого элемента находится под вторым элементом. Только тень 3-го элемента отображается поверх 2-го элемента.
Думаю, я мог бы поиграть с z-index, но есть ли способ убедиться, что все box-shadow всегда находятся поверх всего остального? Это как-то связано с flexbox?
z-index: 1
к.outside2:hover
. Вам не нужно позиционирование CSS. - person Michael Benjamin   schedule 01.10.2016