CODEWITHSUNDEEP
javascripthtmlcss
Darien Miller
Darien Miller

Reputation: 753

Is there any way to bring shadowing to the foreground?

I have two divs stacked next to each other, and I'm attempting to use shadowing to make it look like one div is behind the other. Adding shadowing to the left of the div on the right seems to work, but adding shadowing to the right of the div on the left side casts the shadow behind the right div instead of in front of it. Is there any fix to this?

.wrapper{
    display: grid;
    width: fit-content;
    height: 150px;
    align-items: center;
    grid-template-columns: 1fr auto;
    border: solid 2px black;
    margin-left: 15%;
}

.wrapper:hover{
    cursor: pointer;

}

.wrapper:hover > .left{
    height: 100%;
    box-shadow: 4px 0px 15px -1px black;
}

.wrapper:hover > .right{
    height: 80%;
    box-shadow: none;
}

.left{
    width: 150px;
    height: 80%;
    background-color: red;
    border: 2px red solid;
    transition: 0.3s;
}

.right{
    width: 100px;
    height: 100%;
    background-color: blue;
    border: 2px blue solid;
    transition: 0.3s;
    box-shadow: -4px 0px 15px -1px #000000;
}
 <div class="wrapper">
      <div class="left">

      </div>
      <div class="right">

      </div>
  </div>

Upvotes: 1

Views: 58

Answers (3)

Reyhan Farabi
Reyhan Farabi

Reputation: 34

You can add z-index inside .wrapper:hover>.left so when you hover the left <div> it will bring the <div> in front and cast the shadow in front of the right <div>.

.wrapper:hover > .left{
    height: 100%;
    box-shadow: 4px 0px 15px -1px black;
    z-index: 1;
}

Upvotes: 1

user17775017
user17775017

Reputation:

I have solved your problem.

You should change your code like below.

.wrapper{
    display: grid;
    width: fit-content;
    height: 150px;
    align-items: center;
    grid-template-columns: 1fr auto;
    border: solid 2px black;
    margin-left: 15%;
}

.wrapper:hover{
    cursor: pointer;

}

.wrapper:hover > .left{
    height: 100%;
    box-shadow: 4px 0px 15px -1px black;
    z-index: 1;
}

.wrapper:hover > .right{
    height: 80%;
    box-shadow: none;
}

.left{
    width: 150px;
    height: 80%;
    background-color: red;
    border: 2px red solid;
    transition: 0.3s;
}

.right{
    width: 100px;
    height: 100%;
    background-color: blue;
    border: 2px blue solid;
    transition: 0.3s;
    box-shadow: -4px 0px 15px -1px #000000;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
    <div class="left">

    </div>
    <div class="right">

    </div>
</div>
</body>
</html>

Upvotes: 2

J. Titus
J. Titus

Reputation: 9690

Adding z-index to the left div when hovering over the wrapper appears to work.

.wrapper {
  display: grid;
  width: fit-content;
  height: 150px;
  align-items: center;
  grid-template-columns: 1fr auto;
  border: solid 2px black;
  margin-left: 15%;
}

.wrapper:hover {
  cursor: pointer;
}

.wrapper:hover>.left {
  height: 100%;
  box-shadow: 4px 0px 15px -1px black;
  z-index: 1;
}

.wrapper:hover>.right {
  height: 80%;
  box-shadow: none;
}

.left {
  width: 150px;
  height: 80%;
  background-color: red;
  border: 2px red solid;
  transition: 0.3s;
}

.right {
  width: 100px;
  height: 100%;
  background-color: blue;
  border: 2px blue solid;
  transition: 0.3s;
  box-shadow: -4px 0px 15px -1px #000000;
}
<div class="wrapper">
  <div class="left">

  </div>
  <div class="right">

  </div>
</div>

Upvotes: 1

Related Questions