CODEWITHSUNDEEP
htmlcsshoverflexboxbox-shadow
Varin
Varin

Reputation: 2443

How can I make box shadow show over the next element in a container?

Please see this code: 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>

And 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; 
  }
}

In the last row where both types of box shadow are displayed on hover, 1st elements' shadow is under the second element. Only the 3rd elements' shadow shows over the 2nd element.

I could play with z-index I guess, but is there a way to make sure that all box-shadows are always on top of everything else? Is this something to do with flexbox?

Upvotes: 5

Views: 3076

Answers (1)

Narek-T
Narek-T

Reputation: 1928

Just add to your block position: relative on hover and give him biggest z-index. JsFiddle link

Upvotes: 3

Related Questions