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