Tengo dos divs apilados uno al lado del otro, y estoy intentando usar el sombreado para que parezca que un div está detrás del otro. Agregar sombreado a la izquierda del div a la derecha parece funcionar, pero agregar sombreado a la derecha del div en el lado izquierdo proyecta la sombra detrás del div derecho en lugar de frente a él. ¿Hay alguna solución para esto?
.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>He resuelto tu problema.
Debe cambiar su código como se muestra a continuación.
.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>Agregar el índice z al div izquierdo al pasar el mouse sobre el envoltorio parece funcionar.
.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>Puede agregar z-index dentro de .wrapper:hover>.left , de modo que cuando pase el mouse sobre el <div> izquierdo, traerá el <div> al frente y proyectará la sombra frente al <div> derecho.
.wrapper:hover > .left{ height: 100%; box-shadow: 4px 0px 15px -1px black; z-index: 1; }