How can we make shadowing take center stage?

I have a design with two stacked divs, and I'm trying to create the illusion that one is behind the other using shadow effects. When I add a shadow to the left side of the right div, it works perfectly. However, when I try to add a shadow to the right side of the left div, the shadow appears behind the right div instead of in front of it. Is there a solution to this issue?

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

.container:hover{
    cursor: pointer;

}

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

.container:hover > .rightDiv{
    height: 80%;
    box-shadow: none;
}

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

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

      </div>
      <div class="rightDiv">

      </div>
  </div>

javascripthtmlcss

Answer №1

I have successfully resolved the issue you were facing.

To address this problem, make the following changes to your code:

.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>

Answer №2

Implementing z-index on the left div while hovering over the wrapper seems to have the desired effect.

.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>

Answer №3

To enhance the visual effect, you can include the z-index property within the .wrapper:hover>.left selector. This way, when you hover over the left <div>, it will be positioned in front and create a shadow overlaying the right <div>.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring JavaScript and accessing objects

I'm currently working on a small file-manager project in JavaScript and I've encountered an issue with the code. In the `get()` function, I am trying to access the `Content.files` array but it seems like there's some problem with variable sc ...

javascriptjqueryajaxjsonobject

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

javascriptcsshttps

Encountering repeated requests (duplicating calls) for each API request while using AngularJS with a JWT authentication token

I'm experiencing a problem with AngularJS(2/4) while attempting to make API calls. The issue arises when each API request contains a JWT Auth Token header, resulting in duplicate API calls. The first request returns no response (despite receiving a 20 ...

javascriptangularjsjwtangular2-jwt

Error message "The camera provided is invalid and not an instance of THREE.Camera" appears when attempting to render a cube using Three.js

I've been working on a small "engine" project using three.js to easily create and position objects. So far, I have set up the scene, renderer, and camera successfully. However, when attempting to render and attach a cube to my scene, I encounter an is ...

javascriptthree.js

"Encountering an Invalid hook call error with React-Leaflet v4 and Next.js 13

I am facing an issue following my update of Next.js from version 12 to 13, which also involved updating React from 17 to 18 and react-leaflet from 3 to 4. Within this component: ` function ChangeView({ center }) { const map = useMap(); map.setView( ...

javascriptreactjsnext.jsreact-leaflet

Issues with Bootstrap Carousel Displaying All Images Simultaneously

Struggling to incorporate a carousel into my Bootstrap 3 website, I decided to use code directly from http://getbootstrap.com/javascript/#carousel. The code lacks documentation, forcing me to make educated guesses. Unfortunately, the current setup simply s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error in Next.js Image Component: Missing SRC

Encountering an error with the next.js image component, specifically related to a missing "src" property. Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {} Th ...

javascriptnext.js

.flex-grow-1 in react-bootstrap does not expand to fill vertical space within <Row>

I'm having trouble using the .flex-grow-1 class in Bootstrap 4.6.0 (with react-bootstrap 1.5.2) to make a component within my layout expand and fill the remaining vertical space available. "bootstrap": "^4.6", "react-bootstrap ...

cssreactjsbootstrap-4flexboxreact-bootstrap

PlasmoCSUI's setting of h-full does not have the ability to completely fill the parent

Issue with PlasmoCSUI h-full not functioning properly I'm having trouble getting my custom button to align correctly with a row of buttons on Twitter. Despite using the h-full attribute, my element isn't filling the parent node as expected. Has ...

htmlcssreactjsgoogle-chrome-extensionplasmo

What is the best way to retrieve the js window object within emscripten's EM_JS function?

I'm looking to access the window.location in an EM_JS method in order to call a JavaScript method from C++. My attempted approach was: EM_JS(const char*, getlocation, (), { let location = window.location; let length = lengthBytesUTF8(location ...

javascriptc++webassemblyemscripten

iterate through all the items in the radioButton collection

Hello, I am looking to iterate through this object and display checkbox values along with their indices. data: [ { key1: 'last 6 months' }, { key2: 'last 30 days' } ] I would like to creat ...

javascriptvue.js

Utilizing jQuery to configure multiple selection options within OptGroup elements

I am working with a Multi-Select list that has OptGroups set up in the following way: <select multiple="multiple" id="idCountry"> <optgroup label="ASIA"> <option value="AUSTRALIA">AUSTRALIA</option> <option value ...

javascriptjquery

Floating box layout with dual columns and empty space

I have a collection of X posts, each with a set width but varying heights. I am trying to organize them into two columns within a single div-wrapper. However, when I align them all to float left, it results in unwanted blank spaces between the posts. Any ...

csshtmlcss-float

Transforming strings of HTML into objects in the DocX format

After developing a TypeScript script that transforms a JSON string into a Word Doc poster using Docx, I encountered a hurdle. Certain sections of the JSON may contain HTML tags, such as <br/>, <i>, <p>, and I need a way to pass the stri ...

javascripttypescriptms-worddocxdoc

Transmit the identifier of the span tag to the URL seamlessly without the need to refresh

<div id="unique50">Greetings</div> Transfer the code 50 to the designated link by clicking on the specific div element without requiring a page reload ...

javascriptjqueryajax

Steps for enabling ckeditor plugin for all textarea on a webpage:

Having trouble applying CKEditor to multiple textarea elements? Look no further. If you're not familiar with JavaScript, don't worry - I've got you covered. Check out the HTML below: <div class="service-fields mb-3"> ...

javascripthtmljqueryckeditor

Node.js consecutive API requests failing to run

I am currently working on a project for one of my courses that requires chaining multiple API calls together. The issue I'm facing is that while the first API call function successfully executes and displays in the terminal, everything after it does n ...

javascriptnode.jsapiexpressnode-fetch

Activating the onclick function to open a tab and automatically position the cursor inside a textfield

I have a requirement to automatically place the cursor on a specific field whenever a rich tab is navigated to. I attempted using onclick and onlabelclick on the richTab, but it did not work as expected. Then, I tried utilizing ontabenter, which called my ...

javajavascriptjqueryhtmljsf

Animate elements using fixed position without unexpected jumps

Trying to create an animation that expands a box to full screen. However, when I set the position to fixed before the animation begins, the box quickly moves up to the upper left corner. Is there a way to make it expand from its original location instead? ...

jquerycss

Invoke the parent controller's function within the route

I'm currently utilizing ngRoute, and in my route controller I need to be able to call a function from the parent controller without using $scope. Here is a snippet of index.html: <div class="col-lg-12" ng-controller="IndexController as index"> ...

javascriptangularjs