Issue
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>Solution
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>Answered By - Nikita Bai
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.